paramètres Passing aux fonctions d'événements

Question

Jetez un coup d'oeil sur ce simple exemple

<input type="button" value="btn1" id="btn1" /> 
<input type="button" value="btn2" id="btn2" /> 
<input type="button" value="btn3" id="btn3" /> 
<input type="button" value="btn4" id="btn4" /> 
<input type="button" value="btn5" id="btn5" /> 

<script> 
    for (i=1; i<5; ++i){ 
     var btn = document.getElementById('btn' + i); 
     btn.onmouseover = function(){ 
      alert(i); 
     } 
    } 
</script> 

j'attendre devrait alertes par exemple 1 quand je déplace ma souris sur btn1, mais malheureusement, il alerte 5 du tout!

Comment puis-je passer des variables de la boucle à la fonction?

Answer 1

Ceci est le problème de la boucle de fermeture. Tous les mouseovers se referment sur la même variable, puisque JavaScript n'a que la portée de la fonction. Vous pouvez le réparer en créant une nouvelle fonction, et donc une nouvelle portée.

for (i=1; i<5; ++i){ 
    (function(i) 
    { 
     var btn = document.getElementById('btn' + i); 
     btn.onmouseover = function(){ 
      alert(i); 
     } 
    })(i); 
}