Configuración onclick para utilizar el valor actual de la variable en bucle

Question

El título puede no tener sentido y ni tampoco una descripción solo, así que aquí está una muestra del código:

for(var a=0;a<10;a++) { 
    var b=document.createElement('b') 
    b.onclick=function() { 
     alert(a) 
    } 
    b.innerHTML=a 
    document.body.appendChild(b) 
} 

Lo curioso es que cuando me puse innerHTML para a, usa el valor actual de a. Por lo tanto, este código crea diez elementos <b> con los valores 0, 1, 2, 3, 4, 5, 6, 7, 8, & 9. Esto funciona perfectamente. Lo que no es, sin embargo, la función onclick. Devuelve el valor final de a (10) cuando se hace clic en cualquiera de estos elementos. Intenté establecer otra variable en a y luego usar esa otra variable en el evento onclick, pero aún así devuelve el valor final de a. ¿Cómo haré que use el valor de a cuando se establece onclick?

Answer 1

intente lo siguiente

b.onclick= function(arg) { 
    return function() { 
     alert(arg); 
    } 
}(a); 

El problema estuviera golpeando es que Javascript no utiliza ámbito de bloque. En cambio, todas las variables tienen una vida de su función contenedora. Por lo tanto, solo se capturó a en todas las funciones onclick y todos ven su valor final.

La solución funciona alrededor de esto creando una nueva función y valor por alcance e inmediatamente estableciendo ese valor en el valor actual de a.

Aquí hay una versión que es un poco expandió y quizás un poco más legible

var createClickHandler = function(arg) { 
    return function() { alert(arg); }; 
} 

for(var a=0;a<10;a++) { 
    var b=document.createElement('b') 
    b.onclick = createClickHandler(a); 
    b.innerHTML=a 
    document.body.appendChild(b) 
} 

Answer 2

Una solución sucia que me pareció que es utilizar .value propiedad del objeto creado para almacenar el argumento que queremos pasar a la función .onclick. Así que puedo hacer algo como

for(var a=0;a<10;a++) { 
    var b=document.createElement('b') 
    b.value=a 
    b.onclick=function() { 
     myfunc(this.value) 
    } 
    b.innerHTML=a 
    document.body.appendChild(b) 
} 
function myfunc(n){ 
    console.log(n) 
} 

No estoy seguro de si .value trabaja con todos los elementos, pero sí para el DIV por ejemplo.

EDIT: Para pasar más valores entonces uno puede concatenar el uso de algún personaje como _ y luego se dividió

b.value=x+"_"+y+"_"+z 

function myfunc(str){ 
t=str.split("_") 
x=t[0] 
y=t[1] 
z=t[2] 
console.log(x+","+y+","+z) 
}