Valeur non prise en compte dans une boucle

Version imprimable

Bonjour,

Dans le script, pour éviter une répétition, j'ai voulu remplacer le code par celui placé en commentaire. Ce dernier n'affiche pas le nombre souhaité.

Auriez-vous une solution à proposer? Merci par avance pour vos réponses.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
 
<head><meta charset="utf-8"></head>
 
<body>
 
<header>
<nav>Zéro</nav>
<nav>Un</nav>
<nav>Deux</nav>
<nav>Trois</nav>
</header>
 
<script>
document.getElementsByTagName("nav")[0].onclick=function() { alert(0); };
document.getElementsByTagName("nav")[1].onclick=function() { alert(1); };
document.getElementsByTagName("nav")[2].onclick=function() { alert(2); };
document.getElementsByTagName("nav")[3].onclick=function() { alert(3); };
/*
for (var i=0;i<document.getElementsByTagName("nav").length;i++) {
	document.getElementsByTagName("nav")[i].onclick=function() { alert(i); };
}
*/
</script>
 
</body>
</html>

En utilisant le JS d'aujourd'hui (ES2015), car si vous utilisez "var" au lieu de "let", "i" sera toujours égal à 4.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let
  navs = document.getElementsByTagName("nav"),
  length = navs.length;
 
for ( let i = 0; i < length; i++ ){
    navs[ i ].addEventListener( 'click', function( ev ){
 
    // debug, console, touche F12
    console.log( `nav click   : ${i}` );
 
    alert( i );
 
  }, false );
}

Un chouilla plus simple ;)

Code:

1
2
3
4
5
6
7
8
 
for (var i = 0; i < document.getElementsByTagName("nav").length; i++) {
           var vElt = document.getElementsByTagName("nav")[i];
           vElt.originalindex = i;
           vElt.onclick = function (e) {
                alert(this.originalindex);
           };
}

Bonjour,
effectivement il s'agit d'un problème de scope bien connu , il existe bien des solutions et comme l'a dit danielhagnoul l'apport d'ES2015 est le plus avancé.

@aloisio11 :
il est toujours intéréssant de mettre les données en « cache », par exemple pour ton code
Code:

1 2 3 4 5 6 7 8 var oElem = document.getElementsByTagName('nav'); var i, nb = oElem.length; for (i = 0; i < nb; i += 1) { oElem[i].originalindex = i; oElem[i].onclick = function (e) { alert(this.originalindex); }; }