[FRAGE] Verständnisproblem mit for-Schleife über eine nodeList

[j-l-n]

<div id="list">
  <div>...add</div>
  <div>...add</div>
  <div>...add</div>
</div>

Wieso wir bei einem Klick - auf egal welches <div> - immer nur das letzte geändert?

var listItems = document.getElementById("list").children;

for(var x = 0; x < listItems.length; x++){
  var listItem = listItems[x];
  listItem.addEventListener("click", function(){
    edit(listItem);
  });
}

function edit(element){
  element.textContent = "clicked.";
}

Mit edit(this); funktioniert es jedoch...

 

[tsseh]

Wieso wir bei einem Klick - auf egal welches <div> - immer nur das letzte geändert?
...
Mit edit(this); funktioniert es jedoch...

weil eine closure die variable speichert, und nicht den wert
die variable listItem hat nach der schleife aber den wert <<letztes element>>
bzw. vielleicht ist dir auch nicht klar, dass variablen im scope der funktion liegen und nicht im block. das geht erst mit let variable; in es6

 

[j-l-n]

weil eine closure die variable speichert, und nicht den wert
die variable listItem hat nach der schleife aber den wert <<letztes element>>

Ach ja, stimmt, so etwas hatten wir letztens in irgendeinem anderen Thread... Danke dir!

Wie kann ich den aktuellen Wert von x übergeben?

 

[tsseh]

Wie kann ich den aktuellen Wert von x übergeben?

ich mach das immer über eine weitere closure

var listItems = document.getElementById("list").children;

for(var x = 0; x < listItems.length; x++){
  listItem.addEventListener("click", (function(listItem){
    return function()
    {
      edit(listItem);
    };
  })(listItems[x]));
}

function edit(element){
  element.textContent = "clicked.";
}

 

[kkapsner]

Ich finde da .forEach leichter zu lesen:

Array.prototype.forEach.call(
	document.getElementById("list").children,
	function(listItem){
		listItem.addEventListener(
			"click",
			function(){
				edit(listItem);
			}
		);
	}
);

function edit(element){
  element.textContent = "clicked.";
}

 

[j-l-n]

Danke euch beiden!

- - - Aktualisiert - - -

Ach ja, eins noch: spricht etwas gegen die Verwendung von this, wenn ich nur das Element übergeben will, oder ist das eine saubere Lösung?

 

[kkapsner]

Die sauberste Lösung (in meinen Augen) ist, wenn du nicht für jedes Element eine eigene Funktion erzeugst:

Array.prototype.forEach.call(
	document.getElementById("list").children,
	function(listItem){
		listItem.addEventListener(
			"click",
			edit
		);
	}
);

function edit(){
  this.textContent = "clicked.";
}

Brauchst am wenigsten Speicher und hast keine Gefahr eines Memoryleaks.

 

[j-l-n]

Hm, Problem ist dabei aber, dass ich die Funktion brauche, um weitere Parameter zu übergeben:

listItem.addEventListener("blur",
  (function(item, itemNumber){
    return function(){
      save(item, itemNumber);
    };
  })
  (listItem, x)
);

 

[kkapsner]

Dann musst du's so machen. this kannst du dann aber trotzdem verwenden.

Aber sauber sind beide Lösungen.

 

[j-l-n]

Gut zu wissen - danke nochmal!