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;
};