Pasar valores a onclick

Question

Si creo una gran cantidad de elementos HTML usando un bucle, como

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

a continuación, cuando se hace clic en el elemento, el valor de i pasa a my_function es siempre 100, independientemente de qué número elemento lo está llamando. He trabajado en todo esto mediante el uso

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

(Para Internet Explorer, los target necesidades sean srcElement, al parecer.) Tengo curiosidad por saber si hay alguna manera de crear la función sin tener que añadir el ID de el elemento así.

Answer 1

El valor de i cambia con cada iteración del bucle. You need a closure to capture the value of i:

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

Answer 2

si fuera tú me usar jQuery (o prototipo o lo que sea marcos JS que estén disponibles)

en cada uno de los elementos que debe agregar atributos como myid por ejemplo, para que cuando se hizo el clic se puede retrive ella.

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

}); 

hice este truco en mi aplicación web :)

Answer 3

Si se escribe una función que se construye una función de controlador, puede utilizar el nuevo ámbito, que eso le da a asegurarse de que obtiene el número que desea. Por ejemplo:

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