Acabo de experimentar con JavaScript y estaba probando este código.
var elements = document.getElementsByTagName("p"); var n = elements.length; // Should be: 10 for (var i = 0; i < n; i++) { elements[i].onclick = function () { console.log("This is element #" + i); }; }
<p>Element: #1</p> <p>Element: #2</p> <p>Element: #3</p> <p>Element: #4</p> <p>Element: #5</p>
Sin embargo, cuando se ejecuta el código, ocurre algo extraño. Básicamente, por ejemplo, si hace clic en el elemento #1, dirá que ha hecho clic en el elemento #5.
Esto es lo que tengo curiosidad por saber:
cambio de var para dejar:
for (let i = 0; i < n; i++) { elements[i].onclick = function () { console.log("This is element #" + i); }; }
Puede utilizar el siguiente código para corregir los problemas.
var elements = document.getElementsByTagName("p"); var n = elements.length; function makeHandler(num) { return function() { console.log("This is element #" + num); }; }; for (var i = 0; i < n; i++) { elements[i].onclick = makeHandler(i + 1); }
Expliquemos el código.
Básicamente, en este código, makeHandler
se ejecuta inmediatamente cada vez que pasamos por el ciclo, cada vez que recibe el valor actual de i + 1
y lo vincula a una variable num
con ámbito.
La función externa ( makeHandler
) devuelve la función interna (función anónima) (que también usa esta variable num
con ámbito) y el onclick
del elemento se establece en esa función interna.
Esto asegura que cada onclick
reciba y use el valor i
adecuado (por la variable num
de alcance).