valeurs Passing à onclick

Question

Si je crée beaucoup d'éléments HTML en utilisant une boucle, comme

for (i= 1; i < 100; i++) { 
    var my_element = document.createElement ("td"); 
    row.appendChild (my_element); 
    my_element.onclick = function() {my_function (i)); 
} 

puis quand l'élément est cliqué, la valeur de i passée à my_function est toujours 100, peu importe ce nombre l'élément l'appelle. Je travaille autour de cela en utilisant

my_element.id = "something"+i; 
my_element.onclick = function (e) {my_function (e.target.id)}; 

(Pour Internet Explorer, les target a besoin d'être srcElement, apparemment.) Je suis curieux de savoir s'il y a un moyen de créer la fonction sans avoir à ajouter l'ID à l'élément comme ça.

Answer 1

La valeur de i change à chaque itération de la boucle. You need a closure to capture the value of i:

(function(i) { 
    my_element.onclick = function() {my_function (i)}; 
}(i)) 

Answer 2

si je vous je vais utiliser Jquery (ou prototype ou quels que soient les cadres js que disponibles)

sur chacun des éléments que vous devez ajouter des attributs comme myid par exemple de sorte que lorsque vous avez fait clic, vous pouvez retrive il.

for(i=1; i ++ ; i<100){ 
    var myelement = "<td myid='something"+i+"' class='myTD'></td>" ; 
    row.append(myelement); 
} 

.... 

$(document).ready(function(){ 
    $('.myTD').click(function(){ 
    var id = $(this).attr('myid'); 
    my_function(id); 
    }); 

}); 

Je l'ai fait ce truc sur mon application web :)

Answer 3

Si vous écrivez une fonction qui vous construit une fonction de gestionnaire, vous pouvez utiliser le nouveau champ d'application qui vous donne à vous assurer que vous obtenez le numéro que vous voulez. Par exemple:

function BuildHandler (i) { return function() { alert(i); }; 

for (i= 1; i < 100; i++) { 
    var my_element = document.createElement ("td"); 
    row.appendChild (my_element); 
    my_element.onclick = BuildHandler(i); 
}