Discussion :

[Linkfab]

Bonjour,

Je débute en Javascript et je souhaitais préparer des animations à l'aide de fonctions.

Le principe est que lorsque j'appuie sur une fiche, elle s'anime.
J'ai donc un tableau de fiches et une fonction mouvement(i) qui permet d'animer la i-ème fiche de mon tableau.
Je souhaitais donc préparer ces animations à l'aide d'un appel via onclick() dans une IIFE.
Seulement, je me suis rendu compte que la fonction était appelée avec la dernière valeur prise par i (ici fiches.length), et non par la valeur qu'avait i au moment de la boucle.

Comment puis-je faire pour remédier à ce problème ? Merci d'avance pour votre aide.

PS : j'ai un nombre de fiches variable

Code :

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

1
2
3
4
5
(function() {
  for (var i = 0; i < fiches.length; i++) {
      fiches[i].onclick = function() {mouvement(i);};
  };
})();

[NoSmoking]

Bonjour,
il y a bien des façons de procéder dont une est donnée dans
Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?

Après cela peux dépendre de ce que tu veux faire avec ton i et ce qu'il est sensé représenter.

[eleydet]

Bonjour,

Voulez-vous tester la solution suivante?

Code :

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

1
2
3
4
5
6
(function() {
  for (var i = 0; i < fiches.length; i++) {
      fiches[i].indice=i;
      fiches[i].onclick = function() {mouvement(this.indice);};
  };
})();

[Linkfab]

Merci beaucoup !

Ca fonctionne parfaitement.

[danielhagnoul]

Pour résoudre le problème de la valeur de "i", il suffit d'utiliser le JS d'aujourd'hui, il proscrit l'usage de "var" au bénéfice de "const" et de "let". Dans votre cas :

Code :

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

1
2
3
4
5
(function() {
  for (let i = 0; i < fiches.length; i++) {
      fiches[i].onclick = function() {mouvement(i);};
  };
})();

[eleydet]

Bonjour,

danielhagnoul a écrit : ... JS d'aujourd'hui, il proscrit l'usage de "var" au bénéfice de "const" et de "let"...

Il se pose toutefois le problème de la compatibilité avec les anciens navigateurs? Il est peut-être préférable d'attendre un peu avant d'utiliser "const" et "let"?

[Watilin]

http://caniuse.com/#feat=let
Environ 76 % d’usage à l’heure où je poste. Chacun est libre de déterminer si c’est un chiffre suffisant pour utiliser let en production ou pas.

[NoSmoking]

Effectivement, la réponse de danielagnoul est la réponse la plus aboutie et actuelle si bien évidement on peut fixer les navigateurs à utiliser. Elle devrait peut être rejoindre la faq.

Concernant la solution proposée par eleydet je la trouve un peu capillotractée bien que parfaitement juste

Dans la fonction anonyme attachée à l'élément on sait que le this vaut cet élément et c'est le pourquoi cela fonctionne, mais pourquoi passer par une fonction anonyme dans ce cas si c'est pour exécuter une fonction.
Pour les n éléments on crée n fonctions anonymes qui font la même chose alors que l'on pourrait directement attacher la référence à la fonction appelée ce qui outre le gain de mémoire serait plus lisible et accessoirement plus facilement maintenable.

Code :

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

1
2
3
4
5
6
7
8
9
10
// définition de la fonction
function mouvement() {
    var objEnCours = this;
    console.log('indice : ' + objEnCours.indice);
}
// affectation de la fonction
for (var i = 0; i < fiches.length; i++) {
    fiches[i].indice = i;
    fiches[i].onclick = mouvement;
};