Boucle "for" qui ne fonctionne pas

Bonjour à tous, mon problème est le suivant :

Code:

---

1 2 3 4 5 6

choixTheme1Li[0].addEventListener("click", () => {themeQuest.textContent=choixTheme1Li[0].textContent} ) choixTheme1Li[1].addEventListener("click", () => {themeQuest.textContent=choixTheme1Li[1].textContent} )

---

Etc.. jusqu'à :

Code:

---

1 2 3

choixTheme1Li[5].addEventListener("click", () => {themeQuest.textContent=choixTheme1Li[5].textContent} )

---

Ca marche, pas de soucis, mais c'est évidemment pas ce que je voulais faire, qui était ceci :

Code:

---

1 2 3 4 5

for (j=0;j<6;j++){ choixTheme1Li[j].addEventListener("click", () => {themeQuest.textContent=choixTheme1Li[j].textContent} ) }

---

Et cette factorisation de code ne marche pas, il me renvoie en console :

Citation:

---

Uncaught TypeError: Cannot read properties of undefined (reading 'textContent')
at HTMLLIElement.<anonymous> (script7.js:53:54)

---

Je ne comprend pas où est l'erreur ???
Merci si vous voyez quelque chose qui doit être évident mais parfois on ne voit plus rien après mille tentatives :)

la variable j est capturée par la fonction de rappel attachée à l'évènement.

Celle ci est définit à j=5 à la fin de la boucle.

Lorsque la fonction est appelée, la variable vaut 5.

Préférer Array.forEach
https://developer.mozilla.org/fr/doc.../Array/forEach

Tel que,

Code:

---

1 2 3

choixTheme1Li.forEach(e => { e.addEventListener("click", () => { themeQuest.textContent=e.textContent; }); });

---

Rhoooo, elle était énorme celle-là !
Tout va bien dans le meilleur des mondes.

Merci bien.

Il est parfois nécessaire d'attacher un index à l'élément dans la boucle.
On peut alors passer par l'attribut data ou une propriété custom ...

Code:

---

1 2 3 4 5 6

for (j=0;j<6;j++){   choixTheme1Li[j].data('indexe')= j; //ouchoixTheme1Li[j].myIndex=j;   }

---

sur le onclick de l'element on aura alors accès au data ou à la propriété

Code:

---

this.data('indexe')

---

ou

Code:

---

this.myIndex

---

Mais c'est clairement une surcharge gourmande dont il vaut mieux se passer lorsqu'on le peut.

Bonjour,

attention tout de même,
vous ne réglez pas le problème lié à l'utilisation d'une fonction fléchée (arrow func)
du code initial du PO.

On peut tester le code suivant pour se convaincre de la différence du comportement
quand à l'attribution de la valeur this en fonction du type de déclaration utilisée.

Code:

---

1 2 3 4 5 6 7

/*[...document.querySelectorAll("body")].forEach(e => {   e.addEventListener("click", () => { console.log(this===e); }); });*/   [...document.querySelectorAll("body")].forEach(e => { e.addEventListener("click", function() { console.log(this===e); }); });

---

https://developer.mozilla.org/fr/doc...rrow_functions

Citation:

---

Une expression de fonction fléchée (arrow function en anglais) ... ne possède pas ses propres valeurs pour this, arguments, super, ou new.target.

---

C'est une subtilité du langage importante à comprendre.