Impostazione onclick per utilizzare il valore corrente della variabile nel ciclo

Il titolo potrebbe non avere senso e nemmeno una descrizione, quindi ecco un esempio del codice:

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

Ciò che è strano è che quando imposto innerHTML su a, usa il valore corrente di a. Quindi, questo codice crea dieci elementi con i valori 0, 1, 2, 3, 4, 5, 6, 7, 8, e 9. Funziona perfettamente. Ciò che non è, tuttavia, è la funzione onclick. Restituisce il valore finale di a (10) quando si fa clic su a qualsiasi di questi elementi. Ho provato a impostare un’altra variabile su ae quindi a utilizzare quell’altra variabile nell’evento onclick, ma comunque restituisce il valore finale di a . Come farò a usare il valore di a quando onclick è impostato?

Prova quanto segue

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

Il problema che stavi colpendo è che javascript non usa scope di blocco. Invece tutte le variabili hanno una durata della loro funzione di contenimento. Quindi c’è stato solo uno catturato in tutte le funzioni onclick e tutti loro vedono il suo valore finale.

La soluzione funziona attorno a ciò creando una nuova funzione e un valore per ambito e quindi impostando immediatamente tale valore sul valore corrente di a .

Ecco una versione un po ‘espansa e forse un po’ più leggibile

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

Una soluzione sporca che ho scoperto è quella di utilizzare la proprietà .value dell’object creato per archiviare l’argomento che vogliamo passare alla funzione .onclick . Quindi posso fare qualcosa del genere

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

Non sono sicuro se .value funzioni con ogni elemento, ma ad esempio per DIV.

EDIT: per passare più valori poi uno li puoi concatenare usando un carattere come _ e quindi dividerlo

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