portée de variable javascript

**jiddou** · 10/11/2009, 22h44

Bonsoir les experts JS.
Je suis entrain de développer une application en JEE mais j'ai eu un problème en javascript sur l'un de mes écrans.
j'ai une boucle javascript qui crée des liens hypertexts dynamiquement et donc pour chaque lien je définis la fonction onclick qui utilise le compteur de la boucle mais c'est là ou le problème se pose.Quand je clique sur un des liens j'ai toujours la dernière valeur du compteur.J'ai même essayé de mettre le compteur dans une variable intermédiaire mais ça ne passe pas.

Voici un exemple simple de mon problème.

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
 
<html>
<head>
<title>Page de Connexion à Sunshine Software</title>
</head>
 
<body>
<div id="deyine">
<script>
 
		var Ind_EtatFin = 0 ;
		for(Ind_EtatFin = 0; Ind_EtatFin < 6 ; Ind_EtatFin++){
 
			var documentRegle = document.createElement('a');
			documentRegle.title = "Documents à générer" ;
			documentRegle.href = "#";
			var l = Ind_EtatFin;
			documentRegle.onclick = function(){alert(l);};
 
			var D = document.createTextNode("D");
			documentRegle.appendChild(D);
			tdDL = document.getElementById('deyine');
			tdDL.appendChild(documentRegle);			
		}
</script>
</div>
</body>
</html>

vous pouvez l'exécuter et voir qu'après clic sur chaque lien on a alert(5);

**emmanuel.remy** · 10/11/2009, 23h43

Salut,

Souci de portée de closure, tu dois remplacer par exemple ainsi:

Code :

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

1
2
3
4
5
 
...
var l = Ind_EtatFin;
documentRegle.onclick = function(pL){return function(){alert(pL);};}(l);
...

car sinon JS garde un lien vers la variable l qui vaut donc 5 en sortie de boucle...

ERE

**kimjoa** · 10/11/2009, 23h48

les variables dont les fonctions on accès sont celles définit dans la fonction et de toutes les fonctions parentes, qui l'aurait déclaré. Par exemple si je déclare une fonction dans une autre, alors cette dernière aura accès , aux variables déclaré dans sa fonctions et au variable de la fonction qui la crée (récursivement ...), et le contexte globale window

Le contexte globale, fait aussi office de fonction main , dans ton exemple tu déclares plusieurs fois une variable l toujours dans le même contexte d'exécution, et plusieurs méthode qui lise la même variable l, donc c'est normale. Pour pallier le problème il faut exécute une fonction anonyme (en faite un contexte différent) qui enregistre la valeur de l, puis de retourner la fonction devant utilisé l.

voilà ce que ca donne :

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
29
30
31
32
 
<html>
<head>
<title>Page de Connexion à Sunshine Software</title>
</head>
 
<body>
<div id="deyine">
<script>
 
		var Ind_EtatFin = 0 ;
		for(Ind_EtatFin = 0; Ind_EtatFin < 6 ; Ind_EtatFin++){
 
			var documentRegle = document.createElement('a');
			documentRegle.title = "Documents à générer" ;
			documentRegle.href = "#";
			documentRegle.onclick = (function(){
                             var l = Ind_EtatFin;
                             return function(){
                                  alert(l);
                             }
                       })();
 
			var D = document.createTextNode("D");
			documentRegle.appendChild(D);
			tdDL = document.getElementById('deyine');
			tdDL.appendChild(documentRegle);			
		}
</script>
</div>
</body>
</html>

**Bovino** · 11/11/2009, 07h52

La réponse est dans la

: http://javascript.developpez.com/faq...lick.dynamique

**SpaceFrog** · 11/11/2009, 09h28

oui sans oublier qui tu est vraiment limite au niveau de l'insertion du script directement dans le body.
Javascript n'aime pas trop manipuler le document tant que celui ci n'est pas intégralement instancié...
Mieux vaudrait passer par une fonction sur le onload ou par un DOMready.
Mais ton souci vient en effet du problème soulevé dans la FAQ

**jiddou** · 11/11/2009, 11h11

Merci tout le monde. Vous avez très bien répondu et expliqué et c'est ce qui est logique. Je ne sais pas ou j'avais la tête.

Merci SpaceFrog pour l'info mais ce n'est qu 'un exemple pour illustrer le problème. Ma jsp en question est loin de ressembler à ça.

Bovino Merci ,j'avais vu mais c'était pas la solution cherchée car je sentait que mon problème venait d'une mauvaise compréhension et je ne voulais pas le régler avec des astuces comme celles de la faq. D'ailleurs je propose d'y ajouter cette solution.

kimjoa , emmanuel.remy c'était clair et merci

portée de variable javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager