0

ante todo disculpas por la torpeza y los "alert" pero no consigo dar con el problema y creo que es algo que no logro comprender.

Es sencillo, tengo este código:

function mostrar(e){

alert(e);}


window.onload=function(){

listadoEdiciones();}

for(e=0;e<mtg.length;e++){
    document.getElementById(mtg[e][2]).addEventListener('click', function(){mostrar(e);});
}}

La idea es que cuando haga click en los elementos listados, mandar el número del parámetro "e" del "for" a una función pero salta el mítico "undefined" o en este caso el valor total del for, que es 21 siempre.

Dejo abajo el codigo entero para que lo veáis mejor todo en conjunto.

https://jsfiddle.net/Lf4z2bh3/

1 respuesta 1

2

El problema esta en el uso de var. Al definir variables de tipo var se genera un asunto llamado hoisting lo cuál hace que siempre se apunte a la misma dirección de memoria para resolver una variable, en este caso tu iterador e. Como el último valor que obtiene esta variable debido al for es 21 este valor se va a compartir en todas los event listeners que creaste.

Una solución sencilla para esto es definir tu variable de iteración como let en vez de var, este tipo de definición no genera hoisting, por lo cuál siempre se va a preservar el valor y se producirá un closure que es básicamente una función que atrapa el estado de una variable en un momento dado.

En general te recomiendo dejar de usar var para definiciones de variables, en vez de eso utiliza siempre const y let, esto te facilitará la vida.

Ejemplo de lo que deberías cambiar:

window.onload=function(){
    
    listadoEdiciones();
    
    for(let i = 0; i < mtg.length; i++) {
        //document.getElementById(mtg[e][2]).addEventListener('click', mostrar);
        document.getElementById(mtg[i][2]).addEventListener('click', function(){mostrar(i);});
    }
}

Finalmente tu jsFiddle quedaría así: https://jsfiddle.net/njseqfyd/

2
  • Funciona perfecto pero solamente tengo un "var" en el código, ¿o es que al crear un for se crea un var automaticamente? Muchas gracias
    – Viral
    Commented el 9 mar. 2022 a las 16:13
  • Realmente el var de tu for es el mismo, solo que lo estas reusando en varios lugares. Commented el 9 mar. 2022 a las 16:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.