[GELÖST] In einer Schleife Elemente mit individuellem onclick erstellen

[JohannesV]

Liebe Forumsbenutzer,

bei der Suche nach einer Antwort auf meine Frage bin ich auf dieses Forum gestoßen. Doch der entsprechende Eintrag half mir nicht weiter und ich habe auch sonst keine passenden Einträge gefunden, sodass ich meine Frage selbst stelle. Wenn meine Frage in dieser Form dennoch schon beantwortet sein sollte, bitte mich einfach darauf hinweisen!

Ich möchte in einer Schleife eine Reihe von <div>s erzeugen, also wie folgt:

var Zaehler; var Anzahl = ...;
for (Zaehler = 1; Zaehler < Anzahl; Zaehler ++)
{var Knopf = document.createElement('div');
document.getElementById('UebergeordnetesElement').appendChild(Knopf);}

Das funktioniert gut. Nun sollen die divs als Button fungieren und eine gemeinsame Funktion aufrufen:

var Zaehler; var Anzahl = ...;
for (Zaehler = 1; Zaehler < Anzahl; Zaehler ++)
{var Knopf = document.createElement('div');
Knopf.onclick = function() {Aktivitaet()};
document.getElementById('UebergeordnetesElement').appendChild(Knopf);}

Auch das funktioniert. Jetzt aber soll jeder Button einen individuellen Wert in die Funktion bringen (und zwar den Wert Zaehler; der erste Button also den Wert 1, der nächste den Wert 2 usw.).

var Zaehler; var Anzahl = ...;
for (Zaehler = 1; Zaehler < Anzahl; Zaehler ++)
{var Knopf = document.createElement('div');
Knopf.onclick = function() {Aktivitaet(Zaehler)};
document.getElementById('UebergeordnetesElement').appendChild(Knopf);}

Das funktioniert nicht. Egal, welchen Button man nach dem Erstellen anklickt, wird der höchste Zaehler-Wert (also vom letzten Button, entsprechend der Anzahl aller Buttons) in die Funktion eingegeben.
Ich dachte, dass JS beim Durchlaufen der Schleife zum Beispiel beim vierten Button schreibt: <button onclick="Aktivitaet(4)"></button>. So würde der Wert für jeden Button passend gespeichert. Offenbar tut es das nicht, sondern lässt das onclick für jeden Button offen. Und am Ende, wenn Zaehler beim höchsten Wert angelangt ist, nutzen alle Buttons diese Zahl
Was ist die Lösung?

Ich benutze Mozilla Firefox, doch es wäre schön, wenn die Lösung für jeden (modernen) Browser geht. Vielen Dank im Voraus!

Johannes

 

[miniA4kuser]

Knopf.onclick = (function (x) {
    return function() {
        Aktivitaet(x);
    }
}(Zaehler));

 

[rico2009]

Hi,

ich habe mal folgendes probiert und es funktioniert ohne Probleme:

var Zaehler;
for (Zaehler = 1; Zaehler < 4; Zaehler ++) {
  var Knopf = document.createElement('button');
   Knopf.className = "Aktivitaet("+Zaehler+");"
  document.getElementsByTagName('body')[0].appendChild(Knopf);
}

Versuch mal den onclick Wert als String zu setzen. Ansonsten, treten bei dir eventuell Fehler auf? (-> http://forum.jswelt.de/javascript-faq/48897-finde-fehlerkonsole.html)

 

[miniA4kuser]

className wird ja auch sofort gesetzt. Bei onclick läuft die for-Variable aber weiter, und wenn irgendwann das click-Event getriggert wird haste dann nen falschen nicht gekapselten Wert, sofern ich mich jetzt richtig erinnere...

 

[JohannesV]

Wunderbar, es funktioniert jetzt - dank Eurer Antworten.
Herzlichen Dank dafür!

miniA4kuser schrieb: "Hoffe ich konnte helfen".
Ja, das konntest Du!
Dein Code mit return function macht alles richtig. Auch wenn ich ihn nicht im letzten Detail verstehe, hilft return function offenbar, den aktuellen Wert von Zaehler für jedes Element einzeln festzuhalten - genau das, was ich wollte. Echt super!

Vielen Dank auch an rico2009 für Deine Hilfe. Mit Deinem Code hat es zwar nicht auf Anhieb funktioniert (die Elemente riefen nach ihrem Erstellen die Funktion gar nicht mehr auf), doch inzwischen habe ich schon eine Lösung. Sicherlich würde auch Dein Code bei mir perfekt funktionieren, wenn ich im restlichen Code irgendeine Kleinigkeit anpasse. Ansonsten hätte ich ja immer noch Deinem Link folgen können. Somit hast auch Du mir sehr geholfen.

Ich freue mich sehr über die schnelle Hilfe von Euch engagierten Forumsnutzern. Wenn ich mit wachsender JS-Erfahrung in Zukunft einmal selbst eine Frage von anderen Nutzern beantworten können sollte, werde ich das gerne tun.

Johannes

 

[mikdoe]

Wenn ich mit wachsender JS-Erfahrung in Zukunft einmal selbst eine Frage von anderen Nutzern beantworten können sollte, werde ich das gerne tun.

Daumen hoch! Können hier immer Helfer gebrauchen!

*gelöst gesetzt*

 

[Dormilich]

Auch wenn ich ihn nicht im letzten Detail verstehe, hilft return function offenbar, den aktuellen Wert von Zaehler für jedes Element einzeln festzuhalten - genau das, was ich wollte.

das Problem nennt sich "Closure", und die gezeigt Möglichkeit ist eine, um solche Probleme zu beheben.

kleiner Tip für den ganz einfachen Fall:
anstatt

Knopf.onclick = function() {Aktivitaet()};

kann man auch

Knopf.onclick = Aktivitaet;

schreiben.

 

[miniA4kuser]

Ansonsten hätte ich ja immer noch Deinem Link folgen können.

Du solltest dir auf jeden Fall einmal die beiden Threads Fehlerkonsole und Arbeiten mit der Konsole anschauen.


Tip: In dem Beispiel von Dormilich wird eine Funktionsreferenz abgegeben, daher ohne die Klammern () am Ende (2. Code).

 

[j-l-n]

Für andere Nutzer: dieses Thema hatten wir auch erst vor kurzem hier

 

[rico2009]

Vielen Dank auch an rico2009 für Deine Hilfe. [...]

Schön das ich dir helfen konnte.

Wenn ich mit wachsender JS-Erfahrung in Zukunft einmal selbst eine Frage von anderen Nutzern beantworten können sollte, werde ich das gerne tun.

Cool, Helfer können wir immer gebrauchen.