Boucle sur src image

Bonjour, j'ai un petit problème avec la boucle suivante:

Code:

---

1 2 3 4 5 6 7 8 9 10 11

var geeks = document.querySelectorAll(".geek img"); for (var i = 0; i < geeks.length; i++){ geeks[i].addEventListener('mouseover', function(){ // changer la scr de l'image var source = this.setAttribute('src', 'img/geek-animation/geek_red/geek-' + i + '.png'); document.querySelectorAll('.geek img')[i] = source; }); geeks[i].addEventListener('mouseout', function(){ // rétablir la source de l'image var source = this.setAttribute('src', 'img/geek-animation/geek_white/geek-' + i + '.png'); document.querySelectorAll('.geek img')[i] = source; }); }

---

cela semble fonctionner pour ce qui concerne la balise img, mais la source me donne une image qui n'existe pas à savoir "geek-7.png", alors que les images vont de geek-0.png à geek-6.png. logiquement cette boucle devrait m'envoyer la même valeur de i que la balise img non?

je ne comprends pas comment faire. quelqu'un aurait-il une soluce pour une débutante comme moi?

merci et bonne année!!!!

Salut et Bonne Année a toi aussi, pour la boucle soit tu initialise a 1 au lieu de 0 ce que je te conseil pas ou soit tu opte 1 a chaque itération a la somme des images soit :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

var geeks = document.querySelectorAll(".geek img"); for (var i = 0; i < (geeks.length-1); i++){ geeks[i].addEventListener('mouseover', function(){ // changer la scr de l'image var source = this.setAttribute('src', 'img/geek-animation/geek_red/geek-' + i + '.png'); document.querySelectorAll('.geek img')[i] = source; }); geeks[i].addEventListener('mouseout', function(){ // rétablir la source de l'image var source = this.setAttribute('src', 'img/geek-animation/geek_white/geek-' + i + '.png'); document.querySelectorAll('.geek img')[i] = source; }); }

---

A tester bien sur.

Bonjour,
l'explication est lié au scope, question que vaut la variable i au moment de l’exécution des fonctions ?

Réponse dans la :faq: Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?.

La réponse « moderne », avec l’avènement de l'ES6, est de remplacer ton var i par let i ton problème de scope sera résolu, voir let sur MDN.

merci c'était bien ça: let !
je pensais que c'était réservé à jquery bêtement..
je vais lire attentivement cet article

merci encore!!!

Salut,

Ah NoSmoking m'a devancé, je voulais tester avant de répondre... Merci à lui notamment pour la faq...

Bon je poste quand même une simplification de votre code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

var geeks = document.querySelectorAll(".geek img");   for (let i = 0; i < geeks.length; i++) {   geeks[i].addEventListener('mouseover', function () { // changer la scr de l'image this.src = 'img/geek-animation/geek_red/geek-' + i + '.png'; }); geeks[i].addEventListener('mouseout', function () { // rétablir la source de l'image this.src = 'img/geek-animation/geek_white/geek-' + i + '.png'; }); }

---

C'est moins lourd et plus rapide je pense que d'utiliser à chaque fois querySelectorAll(".geek img"), setAttribute et la variable "source"....

oui merci beginner.!