11528 sujets

JavaScript, DOM et API Web HTML5

Optimisation d'un code

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)
Sujet clos
Aller à