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