Changer le style des cases d'un tableau quand on clique dessuis

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:

---

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 ?

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:

---

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.

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.