Closure qui me rend fou

Version imprimable

Bonjour,

Voici ce que j'aimerais faire :
J'ai un UL que je popule dynamiquement avec des LI selon des données (ici l'array artids).
Quand je clique sur un LI, j'aimerais avoir le "numéro" du LI (1 pour le premier, etc).

Mais pour une raison qui m'échappe (je suspecte le bug), le code suivant ne marche pas !!

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>IP</title>
</head>
<body bgcolor="#ffffff">
 
<ul id="ull">
</ul>
<script language="javascript" type="text/javascript">
<!--
 
var ul = document.getElementById("ull");
var artids = [
	{ "firstChild" : { "data" : "a" } }
	, { "firstChild" : { "data" : "b" } }
	, { "firstChild" : { "data" : "c" } }
];
 
for(var x = 0; x < artids.length; x++) {
	var artid = artids[x].firstChild;
 
	var v = "";
	do {
		if (artid.data) {
			v += artid.data;
		}
	} while (artid = artid.nextSibling);
 
	var liElem = document.createElement("li");
	liElem.id = x;
	var xCopy = x;
	fMouseDown = function(evt) {
//				CurrentPage.suggestChange(input, liElem);
//				alert(evt.currentTarget.id);
		alert(xCopy);
	}
	liElem.onmousedown = fMouseDown;
 
	var txt = document.createTextNode(v);
 
	liElem.appendChild(txt);
 
	ul.appendChild(liElem);
}
</script>
 
</body>
</html>

Pourtant je met bien la valeur dans une variable (xCopy) qui n'existe qu'à chaque itération de la boucle.

Merci pour vos lumières.

30/09/2010, 16h19
SpaceFrog

ce ne serait pas a cause d'un conflit de nommage ? firstChild etant un mot réservé de javascript ? data aussi ?
30/09/2010, 16h51
Bovino

Citation:

Pourtant je met bien la valeur dans une variable (xCopy) qui n'existe qu'à chaque itération de la boucle.

Oui, mais xCopy est une référence à x et évolue en même temps ;)

Voir à ce sujet : Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?
30/09/2010, 17h10
RomainVALERI

C'est valide un id entièrement numérique ? :? Ca devrait mais je ne sais pas pourquoi ca me fait douter... :koi: Je vais vérifier...

edit : un id doit commencer par une lettre, non un chiffre : serait-ce une piste ?

Pour la closure, qqch comme ça devrait régler le problème
Code:

1 2 3 4 5 6 liElem.onmousedown = function(i) { return function(evt) { alert(i); } }(x); // appel immédiat de la fonction englobante en passant x et créant une closure (variable i différente à chaque itération et copiant x)
Maintenant il me semble qu'il y a un autre problème, quand je lit

Code:

} while (artid = artid.nextSibling);

Il me semble que tu confonds le DOM et un objet JSON.

30/09/2010, 21h02
Bovino

Citation:

Envoyé par marcha

Maintenant il me semble qu'il y a un autre problème, quand je lit

Code:

} while (artid = artid.nextSibling);

Il me semble que tu confonds le DOM et un objet JSON.

Non : si l'élément a un nextSibling, l'affectation renvoie le nouvel élément et on réitère, si l'élément n'a pas de nextSibling, la propriété renvoie null, ce qui fait sortir correctement de la boucle ;)
01/10/2010, 09h43
RomainVALERI
Citation:

Envoyé par Bovino

Oui, mais xCopy est une référence à x et évolue en même temps ;)

Si x était un objet, bien entendu.
...mais une référence sur un entier ? :?

Tu veux dire que si on a :
Code:

1 2 3 4 var a = 1; var b = a; a++; alert(b);
l'alert va nous sortir un "2 ? :koi: (je sais bien que non, mais c'est ce que je comprends de ta remarque : j'ai donc du rater un truc, pardon d'avance :mrgreen:)

Citation:

Envoyé par Bovino

Non : si l'élément a un nextSibling, l'affectation renvoie le nouvel élément et on réitère, si l'élément n'a pas de nextSibling, la propriété renvoie null, ce qui fait sortir correctement de la boucle ;)

Oui, quand on travail avec des éléments DOM je suis d'accord, mais
dans ce code il ne s'agit pas d'éléments DOM mais d'une structure JSON.

Et le do while sert à rien car artid.nextSibling vaut toujours undefined,
test ceci:
Code:

1 2 3 4 5 6 7 8 var artids = [ { "firstChild" : { "data" : "a" } } , { "firstChild" : { "data" : "b" } } , { "firstChild" : { "data" : "c" } } ]; var artid = artids[0].firstChild; alert(artid.nextSibling);

01/10/2010, 10h18
Bovino

Arf... bien vu effectivement :oops:
01/10/2010, 10h22
SpaceFrog

Citation:

dans ce code il ne s'agit pas d'éléments DOM mais d'une structure JSON.

n'est ce pas justement là le souci
"nextSibling" du json confondu avec nextSibling du DOM ???

Citation:

Envoyé par SpaceFrog

n'est ce pas justement là le souci
"nextSibling" du json confondu avec nextSibling du DOM ???

C'est un bug BONUS dans le code, mais ce n'est pas le
problème de la question de base, le problème de base est
solutionable par la réponse de Bovino qui pointe sur ton
article SpaceFrog.

Mais comme le sujet du post est "Closure qui me rend fou"
Voici la version basée sur ton article avec une closure .

Ce qui permet d'éviter de toucher au DOM en créant une fonction
différente par passage de boucle pour mémoriser les état succesifs de i.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 // fonciton qui crée une fonction ainsi qu'une closure pour c function bar(c) { return function() { alert(c); } } function foo(){ for (i=0;i<10;i++){ var MonDiv=document.createElement('DIV'); MonDiv.innerHTML="div " +i; // MonDiv.indice=i; // plus nécessaire MonDiv.onclick= bar(i); // on affecte le résultat de bar, c'est à dire une fonction document.body.appendChild(MonDiv); } }
Mais usuellement ça s'écrit plus synthétiquement ainsi
Code:

1 2 3 4 5 6 7 8 9 10 11 function foo(){ for (i=0;i<10;i++){ var MonDiv=document.createElement('DIV'); MonDiv.innerHTML="div " +i; MonDiv.onclick= function(c) { return function() { alert(c); } }(i); // appel de la fonction anonyme englobante copiant i dans un c unique par boucle document.body.appendChild(MonDiv); } }
J'ai utilisé c comme nom de variable pour pas réutiliser i (ce qui serait
tout a fait fonctionnel, mais "confusing" :)

02/10/2010, 17h53
Sergejack

Citation:

Envoyé par Bovino

Oui, mais xCopy est une référence à x et évolue en même temps ;)

Voir à ce sujet : Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?

Non, si j'ai 10 éléments, une alerte sur xCopy donnera 10 et sur x donnera 11 (dernière itération qui ne vérifie plus la condition de poursuiter).

--

Concernant le code DOM, c'est assez curieux...
En réalité, je travail sur un object DOM (résultat XML) mais pour simplifier, j'ai écrit cette définition en JSON et : ça marche (a, b, c) (IE, FF) ! (avec le problème de closure).
Je ne m'en était même pas rendu compte ^^

--

J'ai quand même résolu le problème en mettant le tout dans une condition paramétré pour crée un nouveau scope.
Mais je jure que la technique "var {...}Copy" avait toujours fonctionné jusqu'à présent !