Closure qui me rend fou

**Sergejack** · 30/09/2010, 16h17

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 :

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

**SpaceFrog** · 30/09/2010, 16h19

ce ne serait pas a cause d'un conflit de nommage ? firstChild etant un mot réservé de javascript ? data aussi ?

**Bovino** · 30/09/2010, 16h51

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 ?

**RomainVALERI** · 30/09/2010, 17h10

C'est valide un id entièrement numérique ?

Ca devrait mais je ne sais pas pourquoi ca me fait douter...

Je vais vérifier...

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

**marcha** · 30/09/2010, 19h17

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

Code :

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

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 :

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

} while (artid = artid.nextSibling);

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

**Bovino** · 30/09/2010, 21h02

Envoyé par marcha

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

Code :

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

} 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

**RomainVALERI** · 01/10/2010, 09h43

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

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

1
2
3
4
var a = 1;
var b = a;
a++;
alert(b);

l'alert va nous sortir un "2 ?

(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

)

**Sergejack** · 02/10/2010, 17h53

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 !

Closure qui me rend fou

JavaScript

Vue hybride

Discussions similaires

Partager

Partager