for schleife fügt addeventlister - click - function falschen forzähler hinzu!??? help

[Bexsta]

Hi..,

vielleicht konntet ihr schon erraten was im titel gemeint ist

var navBtns = document.getElementsByClassName("bgNavBtn");
for(var k = 0 ; k <= navBtns.length; k++ ){
     navBtns[k].addEventListener("click", function(){selectImg(k);},false);
     alert(k)
}

function selectImg(img){
    alert(img)
}

die problematik ist nun das selectImg immer, egal welcher navBtn, die letzte zahl der schleife ausgibt! was ich mir überhauptnicht erklären kann, da ja jeder einzellne navBtn mit k auf gerufen wird und k auch so übergeben wird. wie kann das sein? was hab i übersehen???

Danke für jede Hilfe

EDIT: Es wird übrigens doch nicht die letzte Zahl der Scheife ausgegeben sondern 4.
Vor dem Script werden 4 navBtns erzeugt. Dh. es wird eine Zahl ausgegeben, die garnicht in der oben aufgeführten for scheife erzeugt wird, da dort nur bis 3 gezählt wird!???

 

[zirzofer]

AW: for schleife fügt addeventlister - click - function falschen forzähler hinzu!???

Stichwort closure: die variable wird referenziert, nicht deren wert --> k wird immer als "k am Ende der Schleife" verarbeitet.
Lösung: noch eine Closure (wenn du unbedingt eine for-Schleife verwenden willst, ansonsten mach eine forEach)

var navBtns = document.getElementsByClassName("bgNavBtn");
for(var k = 0; k < navBtns.length; k++){
    let navBtn = navBtns[k];
	navBtn.addEventListener(
		"click",
		(function(navBtn){
			return function(){
				selectImg(navBtn);
			};
		})(navBtn),
		false
	);
}

function selectImg(img){
    console.log(img);
}

Es wird übrigens doch nicht die letzte Zahl der Scheife ausgegeben sondern 4.
For dem Script werden 4 navBtns erzeugt. Dh. es wird eine Zahl ausgegeben, die garnicht in der oben aufgeführten for scheife erzeugt wird, da dort nur bis 3 gezählt wird!???

Nein, wird es nicht, da kleiner-gleich:

for(var k = 0 ; k <= navBtns.length; k++ ){

 

[Bexsta]

AW: for schleife fügt addeventlister - click - function falschen forzähler hinzu!???

Danke für die schnelle Hilfe!

Die Closure war mir bisher nicht bekannt.

Foreach wäre wohl die elegantere Lösung!?
Habe mit Foreach bisher noch nicht gearbeitet. Habe mir den Link zu Mozillas Beschreibung angeschaut, jedoch wüsste ich nicht wie man die Foreach Schleife benutzen sollte.

Kannst Du mir anhand des oben aufgeführten beispiel zeigen wie man sie einsetzt...bitte

- - - Aktualisiert - - -

Nein, wird es nicht, da kleiner-gleich:

Wird es doch!!! Da die Schleife bei Null anfängt und Length bei 1 !!!

 

[zirzofer]

AW: for schleife fügt addeventlister - click - function falschen forzähler hinzu!???

Danke für die schnelle Hilfe!

Gerne.

Habe mir den Link zu Mozillas Beschreibung angeschaut, jedoch wüsste ich nicht wie man die Foreach Schleife benutzen sollte.

Array.prototype.forEach.call(
	document.getElementsByClassName("bgNavBtn"),
	function(navBtn){
		navBtn.addEventListener(
			"click",
			function(){
				selectImg(navBtn);
			}
		);
	}
);

Wird es doch!!! Da die Schleife bei Null anfängt und Length bei 1 !!!

Die Schleife läuft eben doch bis 4, genau wegen dem (falschen) kleiner-gleich:

var navBtns = [1,2,3,4];
for(let k = 0; k<=navBtns.length; k++){
	console.log("Schleife mit <= .length: " + k);
}

for(let k = 0; k<navBtns.length; k++){
	console.log("Schleife mit < .length: " + k);
}

 

[kkapsner]

AW: for schleife fügt addeventlister - click - function falschen forzähler hinzu!???

Müsste es nicht

Array.prototype.forEach.call(
    document.getElementsByClassName("bgNavBtn"),
    function(navBtn, i){
        navBtn.addEventListener(
            "click",
            function(){
                selectImg(i);
            }
        );
    }
);

sein?

 

[zirzofer]

AW: for schleife fügt addeventlister - click - function falschen forzähler hinzu!???

Müsste es nicht
selectImg(i);
sein?

Äh ja freilich, es wollte ja nur die Nummer, nicht das element an sich an die funktion übergegeben. danke für die korrektur!

 

[rckd]

AW: for schleife fügt addeventlister - click - function falschen forzähler hinzu!???

Seit ES6 ist das nicht mehr notwendig:

var buttons = document.getElementsByTagName('button');

for(let i=0; i<buttons.length; i++){
	buttons[i].addEventListener('click', function(){
  	alert(i);
  });
}

Noch ein kleiner Performance-Hinweis: for-vs-foreach. Eine gewöhnliche for-Schleife ist deutlich performanter als .forEach.

 

[kkapsner]

AW: for schleife fügt addeventlister - click - function falschen forzähler hinzu!???

Eine gewöhnliche for-Schleife ist deutlich performanter als .forEach.

Nicht immer:

forEach more local [...]39,763 ±0.43% fastest

 

[zirzofer]

AW: for schleife fügt addeventlister - click - function falschen forzähler hinzu!???

Nicht immer:

ja, kann ich bestätigen

 

[rckd]

AW: for schleife fügt addeventlister - click - function falschen forzähler hinzu!???

Der Vergleich ist ja auch quatsch. for-vs-forEach

 

[kkapsner]

AW: for schleife fügt addeventlister - click - function falschen forzähler hinzu!???

Mit deinem Vergleich scheint irgendwas komisch zu sein - warum ist da forEach plötzlich 10-mal langsamer? Und warum ist der andere Vergleich "Quatsch"?

Bei mir ist forEach massiv schneller:

var arr = [];
for (var i = 0; i < 10000; i += 1){
	arr[i] = i;
}
var sum = 0;
function add(val){
	sum += val;
}
var repeats = 100;

var start = Date.now();
for (var r = 0; r < repeats; r += 1){
	var sum = 0;
	for (var i = 0; i < arr.length; i += 1)add(i);
}
console.log("for:", (Date.now() - start) / repeats, "ms");

var start = Date.now();
for (var r = 0; r < repeats; r += 1){
	var sum = 0;
	arr.forEach(add);
}
console.log("forEach:", (Date.now() - start) / repeats, "ms");

var start = Date.now();
for (var r = 0; r < repeats; r += 1){
	var sum = 0;
	for (var i = 0; i < arr.length; i += 1)add(i);
}
console.log("for:", (Date.now() - start) / repeats, "ms");

var start = Date.now();
for (var r = 0; r < repeats; r += 1){
	var sum = 0;
	arr.forEach(add);
}
console.log("forEach:", (Date.now() - start) / repeats, "ms");

for: 19.82 ms
forEach: 1.56 ms
for: 19.35 ms
forEach: 1.55 ms

PS: Am schnellest ist aber reduce: 0.07 ms, da es für so etwas am besten geeignet ist.

 

[xorg1990]

AW: for schleife fügt addeventlister - click - function falschen forzähler hinzu!???

Bei mir ist forEach massiv schneller:

Hm, das ist aber Seltsam, eigentlich sollte es das keine all zu großen Zeitunterschiede geben.
Deine Zeiten der for loop sind vieeeeeelll zu low.
Chrome:
for: 0.6 ms
forEach: 0.6 ms
for: 0.19 ms
forEach: 0.63 ms

Firefox:
for: 0.13 ms
forEach: 0.07
for: 0.08 ms
forEach: 0.03 ms

 

[kkapsner]

AW: for schleife fügt addeventlister - click - function falschen forzähler hinzu!???

Vielleicht war mein Browser gerade schlecht drauf... jetzt sind die Zeiten fast gleich, aber forEach hat immer noch die Nase vorn:

for: 0.026 ms
forEach: 0.025 ms
for: 0.024 ms
forEach: 0.023