JS Closure - dynamisch 20 Buttons in Schleife mit click event erzeugen

Moin,

Du kannst diese 20 Buttons mit der for-Schleife erstellen. Diesen 20 Buttons gibst du dann die gleiche Klasse aber eine andere Value. Als value kannst du die Variable benutzen die in der for-Schleife hochgezählt wird. Danach selektierst du alle Buttons mittels dem Class Name. Führst auf diese nochmals eine for-Schleife aus in der du jedem Button den Click-Event gibst und dann in der function sagt’s, dass einfach die Value des geklickten Buttons ausgegeben werden soll. Die Value des geklickten Buttons erhält du mit this.value.

Grüße,

Stef

Ich habe eben es mal getestet.

Eines finde ich sehr merkwürdig. Nämlich das trotz for schleife nur 1 button ausgegeben wird. Das verstehe ich nicht.

Eigentlich sollten dort doch 20 Buttons ausgegeben werden.

Kann mir jemand sagen, warum das so ist?

Mein Code lautet:

<div id="buttonsOutput">
            
</div>
<div id="ausgabe">
            
</div>

var buttonsOutput = document.getElementById("buttonsOutput");

for(var a = 0; a <= 20; a++){
            buttonsOutput.innerHTML = 
      "<button value='" + a + "' class='buttons'>Button " + a + "</button>";
}

var buttons = document.getElementsByClassName("buttons");

            for(var i = 0; i < buttons.length; i++){
                buttons[i].addEventListener("click", function(){
                    var value = this.value;
                    var ausgabe = "<p>Button " + value + " wurde geklickt</p>";

                    document.getElementById("ausgabe").innerHTML = ausgabe;
                });
            }

Mich wundert das nicht:

buttonsOutput.innerHTML = "<button value='" + a + "' class='buttons'>Button " + a + "</button>";

Am Ende bleibt der letzte übrig.

Sieht ja fast aus wie meins. Meine Lösung war heute Nacht so.

https://basti1012.bplaced.net/…rdner=html-seminar&id=334

Ich ging davon aus, dass da dann 20 Ausgaben erfolgen. So funktioniert doch eine for-schleife?

Ich denke es hat nicht funktioniert, weil in jedem Durchlauf der vorige Button ja überschrieben wird? Ich habe es auch bereits mit einem Array versucht aber da wurde auch der letzte Button nur angezeigt.

Vielen Dank für das Beispiel. Append sorgt dafür, dass in jedem Durchlauf ja der Button am vorigen angehongen wird.

Ich habe es nun wie folgt hinbekommen:

window.onload = function(){

            var buttonsOutput = document.getElementById("buttonsOutput");

            for(var a = 1; a <= 20; a++){
                var button = document.createElement("button");
                button.innerHTML = a;
                button.className = "buttons";
                button.value = a;
                
                buttonsOutput.appendChild(button);
            }

            var buttons = document.getElementsByClassName("buttons");



            for(var i = 0; i < buttons.length; i++){
                buttons[i].addEventListener("click", function(){
                    var value = this.value;
                    var ausgabe = "<p>Button " + value + " wurde geklickt</p>";

                    document.getElementById("ausgabe").innerHTML = ausgabe;
                });
            }
        }

Ich glaube auch eher, dass mit Erstellen create gefordert ist, anstatt über innerHTML.

Man hätte jetzt nicht gleich wieder eine komplette Lösung zeigen müssen, aber der Ansatz sieht gut aus.

Zitat von Arne Drews

Man hätte jetzt nicht gleich wieder eine komplette Lösung zeigen müssen, aber der Ansatz sieht gut aus.

Ja da hast du recht.

Ich fand es eben sehr interessant und wollte es gleich mal austesten.

Man darf ja 2 Fertige Lösungen pro 6 Themen Posten.