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

)

**marcha** · 01/10/2010, 10h05

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 :

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

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

**Bovino** · 01/10/2010, 10h18

Arf... bien vu effectivement

**SpaceFrog** · 01/10/2010, 10h22

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

**marcha** · 01/10/2010, 10h47

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 :

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

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 :

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

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"

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

Discussions similaires

Partager

Partager