[FRAGE] Button: Onclick wird beim Erstellen ausgeführt

[Rupert]

Hallo zusammen,

in einer dynamisch gefüllten Tabelle erzeuge ich für jede Zeile einen Button:

            var knopf = document.createElement("BUTTON");
            Spalte.appendChild(knopf);
            knopf.setAttribute("click",alert("123"));
            // knopf.addEventListener("click",alert("123"));
            // knopf.onclick = alert("123");
            var t = document.createTextNode("Klick");
            knopf.appendChild(t);

Das Problem: Egal welche der drei Methoden zum Erstellen des OnClick-Ereignisses verwendet wird, wird das Ereignis beim Erstellen des Buttons aufgerufen, nicht jedoch beim Anklicken.

 

[Daniel Pa]

Das sollte funktionieren:

knopf.onclick = function() {
  alert('test');
};

 

[kkapsner]

Erklärung: JS wertet Zuweisungen von rechts nach links und Funktionsaufrufe von innen nach außen aus. Bei dir wird also, wie du schon beobachtet hast, die Funktion ausgeführt und dann der Rückgabewert der Funktion zugewiesen bzw. als Parameter an die Funktion weitergegeben. Du musst also eine Referenz auf eine Funktion verwenden. Das kannst du über eine anonyme Funktion machen oder einfach über die Variable, die die Funktion enthält (ja, alert ist eine Variable - so kannst du alert = 1; schreiben und hast damit die Referenz auf diese Funktion überschrieben).

funktion test(){
	alert(123);
}
knopf.addEventListener("click", test);

PS: addEventListener ist viel leichter zu warten und stabiler, da man darüber einfacher mehrere Funktionen an ein Event binden kann.

 

[Rupert]

Prima. Das klappt. Vielen Dank.

 

[Rupert]

Zu früh gefreut. Meine Funktion benötigt leider einen Aufrufparmeter, der sich mit jeder Zeile ändert.

knopf.onclick = function(param) {
  alert(param);
};

gibt immer den gleichen Wert aus, obwohl jeder Button beim Erstellen einen anderen Wert erhält. Ich habe es mal mit einer einfachen Schleife von 1-5 probiert, dann ist der Wert in allen Zeilen 5.

BTW: Ich habe auch die zweite Methode mit

knopf.addEventListener("click", test);

ausprobiert. Diese Methode wird auch beim Erstellen des Buttons aufgerufen, was nicht sein soll.

 

[kkapsner]

Zeig' mal deinen kompletten Code (mit Schleife), in dem du addEventListener verwendet hast.