Boucle toujours valeur de la dernière itération

**sebaaas** · 11/09/2018, 22h02

Bonjour à tous,

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

Code HTML :

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
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 :

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

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 :

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

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 :

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

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.

**danielhagnoul** · 12/09/2018, 00h10

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

Invité · 12/09/2018, 07h42

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 :

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

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 :

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

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 :

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

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 :

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
 
 
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

**SpaceFrog** · 12/09/2018, 08h11

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

**sebaaas** · 12/09/2018, 09h12

Merci, je vais essayer cela ce soir.

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 :-)

**SpaceFrog** · 12/09/2018, 09h29

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 :

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

this.sel= "100008832"+i

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

Code :

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

<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 :

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

id="_12"

Invité · 12/09/2018, 10h30

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 :

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
 
> 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

**sebaaas** · 12/09/2018, 21h11

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)

**psychadelic** · 12/09/2018, 23h33

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

Boucle toujours valeur de la dernière itération

JavaScript

Discussions similaires

Partager

Partager