11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour, j'ai écrit ce code en javascript et je voudrais savoir comment le traduire en quelques ligne avec des boucles for. À savoir que je répète ce code énormément de fois, c'est pour cela que j'aimerais l'optimiser, merci et bonne soirée à tous !


dates[0].addEventListener('click', function(){
  p.innerHTML = text[0];
});

dates[1].addEventListener('click', function(){
  p.innerHTML = text[1];
});

dates[2].addEventListener('click', function(){
  p.innerHTML = text[2];
});

dates[3].addEventListener('click', function(){
  p.innerHTML = text[3];
});
Salut, je pense qu'il faut que tu incrémente avec une variable i, et que tu la limite à la taille maximal de ton tableau. En remplaçant tes clés par i ça devrais le faire je pense (à essayer et confirmer).

Exemple:

for (i = 0; i < dates.length; i++) {
      dates[i].addEventListener('click', 
      function(){
      p.innerHTML = text[i];
}) ;


Si il te manque une clé tu remplace

i < dates.length

par

i <= dates.length

Modifié par Knhfr (06 Aug 2020 - 21:47)
Knhfr a écrit :
Salut, je pense qu'il faut que tu incrémente avec une variable i, et que tu la limite à la taille maximal de ton tableau. En remplaçant tes clés par i ça devrais le faire je pense (à essayer et confirmer).

Exemple:

for (i = 0; i &lt; dates.length; i++) {
      dates[i].addEventListener('click', 
      function(){
      p.innerHTML = text[i];
}) ;


Si il te manque une clé tu remplace

i &lt; dates.length

par

i &lt;= dates.length


c'est ce que j'avais testé au debut mais pour une raison inconnue il m'affichait peu importe l'élement dates sur lequel je cliquais le dernier elements de text ( text[9] )
Merci beaucoup de ta reponse.
Modérateur
Et l'eau,



@vzytoi :

technique 1:
insère une closure dans ta boucle Smiley cligne Tu garderas/captureras le contexte....

technique 2:
Si tu as beaucoup d'écouteurs attachés au même comportement, ce n'est pas la meilleur solution. Dans ce cas, la var évènements est plus approprié.

technique 3:
array.from ....
el.forEach ....

technique 4 :
array.from
for ... of ...
Modifié par niuxe (08 Aug 2020 - 13:31)