For loop event listener
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anschauen
beispiel
code
container
einmaligen aktion
element
ende
funktion
hilfe
http
machen
problem
schleife
sinn
sparen
testen
url
vier
weiteren elementen
zeile
-
Hallo, ich habe folgendes geschrieben:
for(var id=0; id<Arr.length; id++){ document.getElementById('minus'+id).addEventListener("click", c, false); } function c(){ console.log(1); }
Ich habe mal angenommen 4 Inhalte im Array und somit auch die ID's minus0, minus1, minus2, minus3. Jetzt würde ich gerne ein Event listener per for Schleife auf diese4 ID's machen. Nur funktioniert es dann nur bei minus0.
Kann mir jemand helfen? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wie groß is "id" bei dir?
Beziehungsweise wie groß ist "Arr"?
Wenn es nur bei 0 funktioniert, sieht es so aus, als deine Schleife nur einmal durchläuft.
Existieren sollte das Element, denn sonst würde ein Fehler aufkommen. Nur wenn Arr existiert und nicht gefüllt wurde, ist es "0" und somit läuft die Schleife auch nur genau ein mal. -
kgreen schrieb:
Wie groß is "id" bei dir?
Beziehungsweise wie groß ist "Arr"?
Wenn es nur bei 0 funktioniert, sieht es so aus, als deine Schleife nur einmal durchläuft.
Existieren sollte das Element, denn sonst würde ein Fehler aufkommen. Nur wenn Arr existiert und nicht gefüllt wurde, ist es "0" und somit läuft die Schleife auch nur genau ein mal.
Wie in meinem ersten Post geschrieben hat Arr 4 Inhalte, und id läuft somit von 0-3, wie gewollt. Mehrmals nachgeschaut. -
Es liegt hierbei an dem Scope von ID, denn beim Durchlauf der Schleife steht am Ende
diese Abfrage bei dir:
document.getElementById('minus3).addEventListener("click", c, false); document.getElementById('minus3).addEventListener("click", c, false); document.getElementById('minus3).addEventListener("click", c, false); document.getElementById('minus3).addEventListener("click", c, false);
In deinem Fall ist ID nämlich die letzte Zahl, da sie global ist.
Das Problem ist der Gültigkeitsbereich von ID.
Wenn du das genauer nachlesen möchtest, es nennt sich function expressions:
http://kangax.github.io/nfe/
Du musst den Gültigkeitsbereich verändern, in dem du deine Funktion kapselst.
So funktioniert es:
// HTML <a href="" id="minus0">Minus0</a> <a href="" id="minus1">Minus1</a> <a href="" id="minus2">Minus2</a> <a href="" id="minus3">Minus3</a> //JavaScript var Arr = ['eins','zwei','drei','vier']; for(var id=0; id < Arr.length; id++){ (function(id) { document.getElementById('minus'+id).addEventListener("click", function() { handler(id); }, false); }(id)); } function handler(id){ //console.log(id); alert(id); }
-
kgreen schrieb:
Es liegt hierbei an dem Scope von ID, denn beim Durchlauf der Schleife steht am Ende
diese Abfrage bei dir:
document.getElementById('minus3).addEventListener("click", c, false); document.getElementById('minus3).addEventListener("click", c, false); document.getElementById('minus3).addEventListener("click", c, false); document.getElementById('minus3).addEventListener("click", c, false);
In deinem Fall ist ID nämlich die letzte Zahl, da sie global ist.
Das Problem ist der Gültigkeitsbereich von ID.
Wenn du das genauer nachlesen möchtest, es nennt sich function expressions:
http://kangax.github.io/nfe/
Du musst den Gültigkeitsbereich verändern, in dem du deine Funktion kapselst.
So funktioniert es:
// HTML <a href="" id="minus0">Minus0</a> <a href="" id="minus1">Minus1</a> <a href="" id="minus2">Minus2</a> <a href="" id="minus3">Minus3</a> //JavaScript var Arr = ['eins','zwei','drei','vier']; for(var id=0; id < Arr.length; id++){ (function(id) { document.getElementById('minus'+id).addEventListener("click", function() { handler(id); }, false); }(id)); } function handler(id){ //console.log(id); alert(id); }
Wie auch im ersten Post steht, funktioniert es bei 0! Wenn es so wäre, wie du geschrieben hast, würde es nur beim 4. funktionieren, aber es funktioniert nur beim ersten. Beim googeln bin ich nämlich auf die gleiche Lösung gestossen, wie du mir geschrieben hast. Und auch dein Code funktioniert nicht, beziehungsweise hargenau gleich wie meiner -> Nur bei minus0.
Aber vielen Dank für deine Hilfe.
Beitrag zuletzt geändert: 11.10.2013 12:10:55 von c143 -
Dann möchte ich einfach mal vermuten, dass bei dir noch etwas anderes, was du uns hier nicht gezeigt hast, deinen Code beeinflusst.
Mein Beispiel funktioniert und kannst du hier online testen:
http://codepen.io/Tipo/pen/IoKFz
Weitere Hilfe ist dann nur möglich, wenn du dein drum herum zeigst oder zum Beispiel auch bei CodePen hochlädst, damit wir uns das anschauen können.
jsfiddle ist auch eine Alternative. Oder irgendeine andere Seite.
Beitrag zuletzt geändert: 11.10.2013 13:29:16 von kgreen -
kgreen schrieb:
Dann möchte ich einfach mal vermuten, dass bei dir noch etwas anderes, was du uns hier nicht gezeigt hast, deinen Code beeinflusst.
Mein Beispiel funktioniert und kannst du hier online testen:
http://codepen.io/Tipo/pen/IoKFz
Weitere Hilfe ist dann nur möglich, wenn du dein drum herum zeigst oder zum Beispiel auch bei CodePen hochlädst, damit wir uns das anschauen können.
jsfiddle ist auch eine Alternative. Oder irgendeine andere Seite.
Ich geb dir den Dropbox link, da kannst du entweder die .html Datei runterladen, oder direkt im Browser anschauen: [Link deleted]
Beitrag zuletzt geändert: 11.10.2013 14:18:53 von c143 -
Ok, das sieht schon nach mehr aus.
Das Problem liegt an der einmaligen Aktion mit "window.onLoad".
Du legst zwar einen EventListener an, aber er wird nur einmalig beim Seitenaufruf gestartet.
Fügt man nun weitere Elemente hinzu interessiert das den EventListener nicht.
Jetzt macht die id = 0 auch Sinn.
Folgendes passiert hier:
- Die Seite wird aufgerufen und HTML stellt zwei DIV-Container bereit.
- JavaScript führt die add-Funktion aus und füllt den ersten Container mit Leben.
- Anschließend führt JavaScript die addListeners-Funktion aus.
- addListeners läuft genau einmal durch, da ja nicht mehr Elemente angelegt wurden.
- Fügt man mit der grünen Schältfläche ein neues Element hinzu, wird erneut die add-Funktion gestartet und erstellt einen neuen Container.
- Das war's.
addListeners wird hier "nie" wieder aufgerufen. Von daher weiß dein Listener nichts von weiteren Elementen.
Du kannst dir die zusätzliche Funktion addListeners sparen und den Code einfach an das Ende deiner add-Funktion anhängen.
Auf jeden Fall muss bei jedem add() auch der Listener erneut aufgeführt werden.
Von daher lass die for-Schleife weg und hänge einfach nur die Zeile mit dem addEventListener an das Ende der add-Funktion.
So nebenbei sieht das ganz nett aus. Gefällt mir. -
kgreen schrieb:
Ok, das sieht schon nach mehr aus.
Das Problem liegt an der einmaligen Aktion mit "window.onLoad".
Du legst zwar einen EventListener an, aber er wird nur einmalig beim Seitenaufruf gestartet.
Fügt man nun weitere Elemente hinzu interessiert das den EventListener nicht.
Jetzt macht die id = 0 auch Sinn.
Folgendes passiert hier:
- Die Seite wird aufgerufen und HTML stellt zwei DIV-Container bereit.
- JavaScript führt die add-Funktion aus und füllt den ersten Container mit Leben.
- Anschließend führt JavaScript die addListeners-Funktion aus.
- addListeners läuft genau einmal durch, da ja nicht mehr Elemente angelegt wurden.
- Fügt man mit der grünen Schältfläche ein neues Element hinzu, wird erneut die add-Funktion gestartet und erstellt einen neuen Container.
- Das war's.
addListeners wird hier "nie" wieder aufgerufen. Von daher weiß dein Listener nichts von weiteren Elementen.
Du kannst dir die zusätzliche Funktion addListeners sparen und den Code einfach an das Ende deiner add-Funktion anhängen.
Auf jeden Fall muss bei jedem add() auch der Listener erneut aufgeführt werden.
Von daher lass die for-Schleife weg und hänge einfach nur die Zeile mit dem addEventListener an das Ende der add-Funktion.
So nebenbei sieht das ganz nett aus. Gefällt mir.
Vielen Dank! Macht natürlich Sinn :) Funktioniert jetzt alles! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
