Nombre de boutons à créer :
NB : Déplacer le curseur ci-dessus pour créer les séries de boutons.
Ci-dessous, chaque bouton affiche le "nombre de boutons +1" (lorsqu'il est cliqué)
Ci-dessous, chaque bouton affiche 1,2,3 ... (lorsque le bouton 1,2,3, ... est
cliqué)
=> Chaque bouton tient compte de son ordre de création pour réagir différemment
function afficher(n){alert(n);} function addButtons1(){ var container1=document.getElementById("container1"); container1.innerHTML=""; var nb=slider.value; var i,button; for (i=1;i<=nb;i++){ button=document.createElement("button"); button.innerHTML="Bouton "+i; button.addEventListener('click', function(){afficher(i);}); container1.appendChild(button); } } function addButtons2(){ var container2=document.getElementById("container2"); container2.innerHTML=""; var nb=slider.value; var i,button; for (i=1;i<=nb;i++){ let x=i; /* x = copie de la valeur du i*/ button=document.createElement("button"); button.innerHTML="Bouton "+i; button.addEventListener('click', function(){ afficher(x); /* si le paramètre était i => valeur = référence à i qui vaut 5 à la fin de la bouche */ }); container2.appendChild(button); } } var slider=document.getElementById("nb_buttons"); slider.addEventListener('change', function(){ addButtons1();addButtons2() });
On constate que les codes des fonctions addButtons2() et addButtons2() sont quasi identiques.
Si le nombre de boutons vaut 4 :
Dans le premier cas, la valeur du paramètre ii de la fonction afficher() est passé par référence. Après la boucle, la variable i existe et vaut 5. Lorsque cette fonction sera appelée, elle cherchera dans la mémoire la valeur de la variable i qui sera celle obtenue après la boucle, soit 5.
Dans le second cas, la valeur du paramètre x de la fonction afficher() est passé par valeur. Après la boucle, la variable x n'existe plus. Lorsque cette fonction sera appelée, elle cherchera dans la mémoire la valeur qui a été donnée à ce paramètre lors de la création de l'écouteur.