Discussion :

[soukainazg]

Bonjour,
Après avoir crée une grille , je voudrais appliquer un listener sur chaque case de la grille: à chaque clic la case devra prendre la couleur jaune
Mais quand j'essaie d'éxécuter ce code:

Code :

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

1
2
3
4
5
6
 
var cellules=document.getElementsByClassName("case"); // case étant la classe de toutes les cellules
 for (var k = 0; k < cellules.length; k++)
    { 
    cellules[k].addEventListener("click", function(event){cellules[k].setAttribute('bgcolor','yellow') }, false); 
    }

ca ne marche pas et ca me sort l'erreur suivante: Uncaught TypeError: Cannot read property 'setAttribute' of undefined

Quelqu'un pourrait il m'ider svp ?

[SylvainPV]

C'est le cas classique d'une exécution asynchrone à l'intérieur d'un for.

Quand tu cliques sur une cellule, le code cellules[k].setAttribute('bgcolor','yellow') s'exécute mais à quoi correspond k ? A la dernière valeur qu'il a prise, c'est-à-dire à celle qu'il a à la fin de la boucle for: cellules.length

On peut passer outre ce problème avec une IIFE mais il y a plus simple ici:

Code :

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

1
2
3
4
5
var cellules=document.getElementsByClassName("case"); // case étant la classe de toutes les cellules
 for (var k = 0; k < cellules.length; k++)
    { 
    cellules[k].addEventListener("click", function(){ this.style.backgroundColor = 'yellow') }, false); 
    }

et j'ai mis style.backgroundColor car bgcolor est obsolète, on ne fait plus de style en HTML.

[NoSmoking]

Bonjour,
tu peux également passer par la délégation d'événement sur la TABLE directement comme approché dans la discussion Jeux du post it.