Affectation de variable dans une boucle

Bonjour à tous,

Je suis face à un problème tout bête mais je ne m'en sors pas. Voila le code :

function test() {
  for (var i = 0; i < 10; i++) {
    var a = document.createElement('a');
    a.innerHTML = 'test' + i;
    a.onclick = function () { lala(i); }
    div.appendChild(a);
  }
}

function lala(value) {
  alert(value);
}

A chaque itération de la boucle, je créé un lien et je lui attribue la fonction "lala(i)" sur l’événement "onclick".

Le problème est que lorsque je test les liens qui sont créés, ils affichent tous "10" (soit la dernière valeur de "i"). Je voudrais bien sur que les liens affichent "1", "2", "3", ...

Pouvez-vous m'aider ?

Merci,
Cordialement

Tu peux utiliser une fermeture (closure) pour conserver l'état de ta valeur i.

var showIndex = function(i) {
  return function() {
    alert(i);
  };
};


function test() {
  var div = document.getElementById('endive');
			
  for (var i = 0; i < 10; i++) {
    var a = document.createElement('a');
    a.innerHTML = 'test' + i;
    a.onclick = showIndex(i);
    div.appendChild(a);
  }
}

Si tu veux comprendre les closures en JS je te conseille de regarder la vidéo qui a été postée ici :

http://forum.alsacreations.com/topic-5-75167-1-Comprendre-les-closures-premiere-video-de-formation.html

*double post*
Modifié par lamext (19 Apr 2015 - 15:20)

Impeccable,

merci lamext, cette solution marche nikel.

Je vais de suite voir la vidéo pour en apprendre plus sur cette solution.

Cordialement