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