onlick element via js eine Variable zuweisen

[gowh]

Hi Leute,
folgendes Problem: Ich würde gerne dynamisch via javascript eine Liste erzeugen, auf die man klicken kann und bei der beim onclick-event eine Variable übertragen wird (nämlich die Nummer des Elements in einer bestimmten Liste). Soweit, so gut:

for(i in json){  
	var div = document.createElement("div");  
	div.className = "newTabDiv";  
	div.onclick = function(){ openTabGroup(i) };  
...  
}

Allerdings wird hier nur immer das i vom letzen Element aufgerufen (was ja auch Sinn macht, da das ganze erst am Ende von der for-Schleife passiert. Nur wie kann ich jedem Element bei der onclick-Funktion eine andere Variable vergeben (sodass das erste Element beim onclick auf openTabGroup(0), das zweite auf 1 usw. kommt)?

Danke :)

[molily]

Hallo,

Nur wie kann ich jedem Element bei der onclick-Funktion eine andere Variable vergeben (sodass das erste Element beim onclick auf openTabGroup(0), das zweite auf 1 usw. kommt)?

das ist hier eine häufig gestellte Frage. Kürzliche Antworten:

http://forum.de.selfhtml.org/archiv/2014/1/t216075/
http://forum.de.selfhtml.org/archiv/2014/1/t216168/
http://forum.de.selfhtml.org/archiv/2014/2/t216570/

(Forumssuche nach »schleife function javascript« bzw. »for function javascript«)

Die meisten Lösungen laufen darauf hinaus, eine Funktion zu erzeugen, die das korrekte i in eine Closure einschließt. Partial Application (partielle Anwendung) ist das übergreifende funktionale Konzept: Man erzeugt eine neue Funktion, die mit einem Parameter vorbelegt ist.

Das geht in neueren Browsern z.B. mit Function.prototype.bind:

div.onclick = openTabGroup.bind(undefined, i);

Ich bevorzuge die sprechende Lösung mit _.partial aus der Bibliothek Underscore bzw. Lodash:

div.onclick = _.partial(openTab, i);

Sinnvoller wäre übrigens, addEventListener zum Registrieren des Event-Handlers zu verwenden. onclick ist traditionelles Event-Handling.

Mathias