Discussion :

[ostrach]

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

Code :

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

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 :

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

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 :

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

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 :

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

[unanonyme]

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 :

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

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

[ostrach]

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

Merci bien.

[SpaceFrog]

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 :

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

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 :

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

this.data('indexe')

ou

Code :

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

this.myIndex

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

[unanonyme]

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 :

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

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

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.