Valeur non prise en compte dans une boucle

**eleydet** · 22/07/2016, 09h10

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**danielhagnoul** · 22/07/2016, 11h38

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 );
}

**aloisio11** · 22/07/2016, 11h41

Un chouilla plus simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
           };
}

**NoSmoking** · 23/07/2016, 10h01

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
    };
}

Valeur non prise en compte dans une boucle

JavaScript

Vue hybride

Discussions similaires

Partager

Partager