Discussion :

[Isiker]

Bonjour,
je programme une petite application et je me heurte au problème suivant, concernant ce passage là:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// création du tableau graphique
var caz=0;
for(i=0; i<n; i++)
{
var newRow = document.getElementById('grille').insertRow(-1);
	for(j=0; j<n; j++)
	{
	var newCell = newRow.insertCell(j);
	newCell.className='reus';
	newCell.id='c'+caz;
	newCell.onclick = function() {cpt=joue(caz,cpt);};
	caz++;
	}
}

Donc je créé un tableau graphique en Javascript et à chaque cellule, j'affecte une classe et un id, jusque là pas de problème mais quand je souhaite rajouter un onclick à ma cellule, et après la création de toutes les cellules, quand finalement je clique sur les différentes cases de ma grille (tableau) je me retrouve avec la variable caz passée en paramètre dans la fonction toujours égale au même chiffre, pour TOUTES mes cases, c'est à dire la dernière valeur de caz à la sortie de la boucle.

J'en conclut donc que la fonction est appelée avec la valeur actuelle de caz et non avec la valeur au moment ou j'ai affecté ce onclick.

Ceci me pose donc un réel souci sur lequel je me suis bien cassé la tête, en vain...

Merci d'avance si vous avez des pistes pour moi.

[emmanuel.remy]

Salut,
Tu as parfaitement cerné le souci: la fonction est créée sur le clic, d'où la variable caz qui prend la valeur du moment. Pour changer ce comportement:

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
var caz=0;

for(i=0; i<n; i++)
{
var newRow = document.getElementById('grille').insertRow(-1);
	for(j=0; j<n; j++)
	{
	var newCell = newRow.insertCell(j);
	newCell.className='reus';
	newCell.id='c'+caz;
	newCell.onclick = function (v) {
                      return function() {
                          cpt=joue(v,cpt);
                          };
                    }(caz); 
	caz++;
	}

l'idée est de créer et exécuter sur le onclick une fonction avec comme paramètre caz, afin de transmettre sa valeur dans la boucle.

ERE

[Isiker]

En effet cela marche (n'a pas tout compris mais bon, va tâcher de comprendre), merci à toi.

[emmanuel.remy]

Re,

En effet cela marche (n'a pas tout compris mais bon, va tâcher de comprendre), merci à toi.

Quand tu écris

Code :

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

newCell.onclick = function() {cpt=joue(caz,cpt);};

alors JS crée la fonction et note la référence à la variable caz. Ensuite lors du clic la fonction est déclenchée et la variable caz est évaluée. Elle prend donc la dernière valeur affectée, cella à la sortie de ta boucle.

Maintenant si tu écris

Code :

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

1
2
3
4
5
6
7
8
 
function doJoue(v) {
    return function() {
       cpt=joue(v,cpt);
    };
}
...
newCell.onclick = doJoue (caz);

alors JS appelle doJoue en passant comme paramètre la valeur de caz; doJoue renvoie donc une fonction qui inclut la valeur de caz et non plus une référence à caz. Cela fait toute la différence.

ERE