Boucle toujours valeur de la dernière itération

Version imprimable

Bonjour à tous,

J'ai un petit soucis dans une boucle . Un peu de code pour commencer :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html><html lang="fr"><head>
<meta charset="UTF-8">
<title>Title  the document</title>
</head>
<body>
<center>
<img id="image" src="/dvbt/1000088321.pgm" alt="1000088321" onclick="selection(1000088321)"><br>
<button onmouseover="changer_image(400,-15000)" onmouseout="MouseOut()">-10min</button>
<button onmouseover="changer_image(400,-7500)" onmouseout="MouseOut()">-5min</button>
<button onmouseover="changer_image(400,-1500)" onmouseout="MouseOut()">-1min</button>
<button onmouseover="changer_image(400,-750)" onmouseout="MouseOut()">-30sec</button>
<button onmouseover="changer_image(400,-375)" onmouseout="MouseOut()">-15sec</button>
<button onmouseover="changer_image(400,-250)" onmouseout="MouseOut()">-10sec</button>
<button onmouseover="changer_image(400,-125)" onmouseout="MouseOut()">-5sec</button>
<button onmouseover="changer_image(400,-25)" onmouseout="MouseOut()">-1sec</button>
<button onmouseover="changer_image(400,-1)" onmouseout="MouseOut()">-1frame</button>
<button onmouseover="changer_image(40,-1)" onmouseout="MouseOut()">X-1</button>
<button onmouseover="changer_image(40,1)" onmouseout="MouseOut()">X+1</button>
<button onmouseover="changer_image(400,1)" onmouseout="MouseOut()">+1frame</button>
<button onmouseover="changer_image(400,25)" onmouseout="MouseOut()">+1sec</button>
<button onmouseover="changer_image(400,125)" onmouseout="MouseOut()">+5sec</button>
<button onmouseover="changer_image(400,250)" onmouseout="MouseOut()">+10sec</button>
<button onmouseover="changer_image(400,375)" onmouseout="MouseOut()">+15sec</button>
<button onmouseover="changer_image(400,750)" onmouseout="MouseOut()">+30sec</button>
<button onmouseover="changer_image(400,1500)" onmouseout="MouseOut()">+1min</button>
<button onmouseover="changer_image(400,7500)" onmouseout="MouseOut()">+5min</button>
<button onmouseover="changer_image(400,15000)" onmouseout="MouseOut()">+10min</button>
<br>
<img id="1" src="/dvbt/1000088314.pgm" alt="-7" width="5%" onclick="selection(1000088314)">
<img id="2" src="/dvbt/1000088315.pgm" alt="-6" width="5%" onclick="selection(1000088315)">
<img id="3" src="/dvbt/1000088316.pgm" alt="-5" width="5%" onclick="selection(1000088316)">
<img id="4" src="/dvbt/1000088317.pgm" alt="-4" width="5%" onclick="selection(1000088317)">
<img id="5" src="/dvbt/1000088318.pgm" alt="-3" width="5%" onclick="selection(1000088318)">
<img id="6" src="/dvbt/1000088319.pgm" alt="-2" width="5%" onclick="selection(1000088319)">
<img id="7" src="/dvbt/1000088320.pgm" alt="-1" width="5%" onclick="selection(1000088320)">
<img id="8" src="/dvbt/1000088322.pgm" alt="1" width="5%" onclick="selection(1000088322)">
<img id="9" src="/dvbt/1000088323.pgm" alt="2" width="5%" onclick="selection(1000088323)">
<img id="10" src="/dvbt/1000088324.pgm" alt="3" width="5%" onclick="selection(1000088324)">
<img id="11" src="/dvbt/1000088325.pgm" alt="4" width="5%" onclick="selection(1000088325)">
<img id="12" src="/dvbt/1000088326.pgm" alt="5" width="5%" onclick="selection(1000088326)">
<img id="13" src="/dvbt/1000088327.pgm" alt="6" width="5%" onclick="selection(1000088327)">
<img id="14" src="/dvbt/1000088328.pgm" alt="7" width="5%" onclick="selection(1000088328)">
 
<form action="index.php" method="post">
<p>
    Début <input type="text" name="debut" id="debut">
	Fin <input type="text" name="fin" id="fin">
	Type <input type="text" name="type">
	Description <input type="text" name="description">
    <input type="submit" value="Valider">
</p>
</form>
 
</center>
<script>
var boucle;
var a = "1";
 
function changer_image(temps,nombre_image) {
temps = Number(temps);
boucle = setInterval(changer_image1, temps, nombre_image);
 
}
 
function changer_image1(nombre_image) { 
var x = document.getElementById("image").alt;
x = Number(x);
        var x = x + nombre_image;
        document.getElementById("image").alt = x;
        var str = x.toString();
        var fill = "000000000";
        str = fill.substr(str.length) + str;
        document.getElementById("image").src = "/dvbt/" + str + ".pgm";
        document.getElementById("image").onclick = function(){selection(str);};
        for (var iter = 1; iter < 15; iter++) {
                var y = document.getElementById(iter).alt;
                y = Number(y);
                var z = x + y;
                var strz = z.toString();
                var fillz = "000000000";
                strz = fill.substr(strz.length) + strz;
                document.getElementById(iter).src = "/dvbt/" + strz + ".pgm";
                document.getElementById(iter).onclick = function(){selection(strz);};
        }
}
 
 
function MouseOut() {
clearInterval(boucle);
}
 
function selection(selec) {
        if (a == "1") { 
        document.getElementById("debut").value = selec; 
        a = "2";
        } else {
        document.getElementById("fin").value = selec; 
        a = "1";
        }
}
</script>
</body></html>

Mon problème se situe au niveau de la ligne 83

Code:

document.getElementById(iter).onclick = function(){selection(strz);};

Le onclick est bien remplacé mais il prend la valeur de la dernière itération de la boucle.

En exemple cela donne

Code:

1
2
3
<img id="12" src="/dvbt/1000088326.pgm" alt="5" width="5%" onclick="selection(1000088328)">
<img id="13" src="/dvbt/1000088327.pgm" alt="6" width="5%" onclick="selection(1000088328)">
<img id="14" src="/dvbt/1000088328.pgm" alt="7" width="5%" onclick="selection(1000088328)">

Au lieu de

Code:

1
2
3
<img id="12" src="/dvbt/1000088326.pgm" alt="5" width="5%" onclick="selection(1000088326)">
<img id="13" src="/dvbt/1000088327.pgm" alt="6" width="5%" onclick="selection(1000088327)">
<img id="14" src="/dvbt/1000088328.pgm" alt="7" width="5%" onclick="selection(1000088328)">

Je suis un peu perdu car j'ai +/- la même fonction à la ligne 82 qui fonctionne bien. Merci de votre aide.

12/09/2018, 00h10
danielhagnoul

:salut:

Faites un essai en remplaçant "var" par "let" : for (let iter = 1; iter < 15; iter++) {.

Citation:

Faites un essai en remplaçant "var" par "let"

je présume que c'est la fatigue de la soirée ;)

le pb que tu (sebaas) rencontre est résolu par la closure. Il y a plus de docs sur le net.

qd ta fonction de callback est appelée
Code:

1 2 3 4 function(){ machin strz }
elle cherche la valeur de strz, et strz du scope englobant (boucle for) vaut...la derniere valeur lors de l'itération dans la boucle __comme tu l'as bien constaté__
en effet ta boucle a fini toutes ses itérations elle a _attaché_ ta fonction de callback 15 fois, mais ces callback n'ont jamais été appelées.
qqsoit celle qui est appelée, elle cherchera la valeur de strz...cf ligne au dessus

pr résoudre le pb plusieurs solutions

1) le plus "straightforward" c'est de creer une closure
Code:

1 2 3 4 5 6 7 8 9 function fixmrz(mrz){ var mrzFixé = mrz //inutile mais pour illustration return function originalCallback(){ machin mrz } } machin.onclick = fixmrz(mrz)
fixmrz est __appelée__ dans chaque itération
la fonction originalCallback, attaché sur onclick, cherchera elle mrz dans son scope englobant, non plus for, mais celui fixmrz (ou mrz vaut cette fois... mrzFixé

La manière habituellement rencontrée est
Code:

1 2 3 4 5 6 truc.onclick = (function(iMrz){ return machin iMrz //tu peux appeler l'argument mrz je le change juste pour bien illustrer la différence, mais si tu l'appeles mrz il "surcharge" celui du scope encore englobant, la boucle for })(mrz) //ici on fait juste que appeler la fonction à la volée mais concept est exactement le même //on ecrit pas function(iMrz){}(mrz) parce que la syntaxe(expression) est pas valide alors on met des parenthèses...
2) même concept, en "évitant" la boucle for

si tu as le bénéfice davoir un _array_
tu peux iterer sur alt via forEach, map,..que je te laisse découvrir
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var mesElems = [] for (var iter = 1; iter < 15; iter++) { ... var elementItere = [ iter, strz ] //les elemens sont directement pushés a chaque iteration dans mesElems //et donc ont tous des valeurs "differentes" mesElems.push( elementItere ) } //forEach est une methode de Array, parcourt chacun de ses elem et à chaque elem appèle la fonction de cbk que tu as spécifié. //la différence __important__ est que elle appèle ta cbk à chaque "iteration" qu'elle fait mesElems.forEach(function(elementItere){ var iter = elementItere[0] var strz = elementItere[1] getElementById(iter).onclick = function(){ machin strz //ici tu vois que strz refere à elementItere } })
au début tu écriras pblmt pas mal "solution1" puis nmlt avec le temps tu prends gout à forEach et le fait de ne te plus te préoccuper des boucles for :)

12/09/2018, 08h11
SpaceFrog

Sujet maintes fois traité sur le forum devenu un classique...
Un petit recherche dans le forum t'aurait apporté une solution avec this ...
12/09/2018, 09h12
sebaaas

Merci, je vais essayer cela ce soir.

Citation:

Envoyé par SpaceFrog

Sujet maintes fois traité sur le forum devenu un classique...
Un petit recherche dans le forum t'aurait apporté une solution avec this ...

Et pourtant j'ai cherché ... mais diffice à trouver une réponse quand on n'arrive pas à nommer son problème :-)
12/09/2018, 09h29
SpaceFrog

Dans ta boucle attribues l'indexe de la boucle a ton image :

Je n'ai pas décortiqué ton code, donc il faudra adapter ... mais sur le principe de base :

Code:

this.sel= "100008832"+i

du coup ton onclick devient
avec le sel attribué par js ...

Code:

<img id="12" src="/dvbt/1000088326.pgm" alt="5" width="5%" sel="1000088328" onclick="selection(this.sel)">

Autre chose... un id strictement numérique est déconseillé ...
préfixe le d'un _

Code:

id="_12"

Citation:

Faites un essai en remplaçant "var" par "let" : for (let iter = 1; iter < 15; iter++) {.
je présume que c'est la fatigue de la soirée

en fait non c'est clairement correct!
tjs pensé (à tord) que let avait une durée de vie sur le scope mais pas à chaque itération
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 > var b = [];for(let i = 0; i <5; ++i){b.push(function(){console.log(i)})} 5 > b.forEach(x=>x()) 0 1 2 3 4 undefined > var b = [];for(var i = 0; i <5; ++i){b.push(function(){console.log(i)})} 5 > b.forEach(x=>x()) 5 5 5 5 5

12/09/2018, 21h11
sebaaas

Effectivement, j'ai mis remplacé "var" par "let" partout dans la boucle et cela a fonctionné.
Let a été ajouté avec ES16 (donc ne fonctionne pas avec certains anciens navigateurs)
12/09/2018, 23h33
psychadelic

et j'imagine que tu as compris cette différence qui causait ton erreur de codage ?