onclick Event bei Buttons (for-loop)

  • JavaScript

Es gibt 4 Antworten in diesem Thema. Der letzte Beitrag () ist von TheScripter.

    onclick Event bei Buttons (for-loop)

    Ich möchte gerne beim div class="color" das onclick-Event in eine JS-Datei auslagern.
    (Ist jetzt nur ein Beispiel)

    HTML-Quellcode

    1. <style>
    2. .color {width:50px;height:50px;float:left;}
    3. </style>
    4. <div class="color" onclick="s(0,28);" style="background-color:#cccccc"></div>
    5. <div class="color" onclick="s(1,29);" style="background-color:#dddddd"></div>
    6. <div class="color" onclick="s(2,30);" style="background-color:#646464"></div>
    7. <div class="color" onclick="s(3,31);" style="background-color:#323232"></div>


    Ich möchte es gerne mit JavaScript so verkürzen:

    HTML-Quellcode

    1. <script>
    2. var c = 28;
    3. for(var i=0;i<document.getElementsByClassName('color').length;i++) {
    4. document.getElementsByClassName('color')[i].onclick = function() {
    5. s(i,c);
    6. }
    7. c++;
    8. }
    9. function s(i,id) {
    10. //gibt immer 'i: 4, id: 32' aus
    11. console.log('i: ' + i + ', id: ' + id);
    12. }
    13. </script>


    Die Funktion gibt immer 'i: 4, id: 32' aus. Warum?
    Andoro Browser (V. 4)
    The new technology of browsing the web.
    Link to browser.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „TheScripter“ ()

    1. Überschreibst du dir dein OnClick Event
    2. Javascript nutzt Referenzen - heißt, wenn sich i durch die Schleife ändert, wird bei allen Referenzen der "Basis" Wert angezeigt.
    stackoverflow.com/a/18843648

    Quellcode

    1. <style>
    2. .color {width:50px;height:50px;float:left;}
    3. </style>
    4. <div class="color" style="background-color:#cccccc" data-i="0" data-c="28"></div>
    5. <div class="color" style="background-color:#dddddd" data-i="1" data-c="29"></div>
    6. <div class="color" style="background-color:#646464" data-i="2" data-c="30"></div>
    7. <div class="color" style="background-color:#323232" data-i="3" data-c="31"></div>
    8. <script>
    9. var items = document.getElementsByClassName('color');
    10. for (var i = 0; i < items.length; i++)
    11. {
    12. items[i].addEventListener('click', function() { s(this); });
    13. }
    14. function s(ele) {
    15. var i = ele.getAttribute('data-i');
    16. var c = ele.getAttribute('data-c');
    17. console.log('i: ' + i + ', c: ' + c);
    18. }
    19. </script>

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „slice“ ()

    Ja, ist aber immer etwas "tricky": Creating closures in loops: A common mistake

    Quellcode

    1. <style>
    2. .color {width:50px;height:50px;float:left;}
    3. </style>
    4. <div class="color" style="background-color:#cccccc"></div>
    5. <div class="color" style="background-color:#dddddd"></div>
    6. <div class="color" style="background-color:#646464"></div>
    7. <div class="color" style="background-color:#323232"></div>
    8. <script>
    9. var details = [[0, 28], [1, 29], [2, 30], [3, 31]];
    10. var items = document.getElementsByClassName('color');
    11. for (var i = 0; i < items.length; i++)
    12. {
    13. items[i].addEventListener('click', sCallback(details[i][0], details[i][1]));
    14. }
    15. function sCallback(i, c) {
    16. return function() {
    17. s(i,c);
    18. };
    19. }
    20. function s(i, c) {
    21. console.log('i: ' + i + ', c: ' + c);
    22. }
    23. </script>


    Alternativ geht auf let - Beachte jedoch: Browser compatibility

    Quellcode

    1. <script>
    2. let c = 28;
    3. var items = document.getElementsByClassName('color');
    4. for (let i = 0; i < items.length; i++)
    5. {
    6. let cc = c;
    7. items[i].addEventListener('click', function() { s(i, cc) });
    8. c++;
    9. }
    10. function s(i, c) {
    11. console.log('i: ' + i + ', c: ' + c);
    12. }
    13. </script>
    Hab noch eine Lösung gefunden die funktioniert (sollte man nicht machen, ist aber kürzer):

    HTML-Quellcode

    1. <script>
    2. var c = 28;
    3. var elem = document.getElementsByClassName('color');
    4. for (i=0;i<elem.length;i++){
    5. elem[i].i = i;
    6. elem[i].c = c;
    7. elem[i].onclick = function() {console.log('i: ' + this.i + ', c: ' + this.c);}
    8. c++;
    9. }
    10. </script>
    Andoro Browser (V. 4)
    The new technology of browsing the web.
    Link to browser.