Cómo hacer que un closure en un ciclo recuerde el valor de la variable en cada iteración en JavaScript
¡Hola! Acabo de empezar a estudiar JavaScript y me encontré con un problema que no logro entender. Tengo un ciclo en el que creo event handlers para varios botones. Cada botón debería mostrar su número al hacer clic, pero en su lugar todos los botones muestran el mismo número: el último valor del contador.
// Creamos botones dinámicamente
for (var i = 0; i < 5; i++) {
var btn = document.createElement('button');
btn.textContent = 'Botón ' + i;
btn.addEventListener('click', function() {
alert('Has presionado el botón número ' + i);
});
document.body.appendChild(btn);
}
Cuando hago clic en cualquier botón, aparece el mensaje "Has presionado el botón número 5". ¿Por qué sucede esto? Esperaba que cada botón recordara su valor de i de la iteración en la que fue creado.
He oído algo sobre closures, pero no entiendo cómo funcionan en un ciclo. Por favor, explíquenme cómo resolver este problema correctamente. Preferiblemente con ejemplos.
No answers yet.
Inicia sesión para dejar una respuesta