1

Quiero crear un evento sobre el objeto Window que al soltar una tecla en este caso enter me incremente un contador, en caso de que ese contador llegue a 10 se elimina ese evento. El problema es que funciona bien, al llegar al 10 deja de contar, pero sigue registrandome la tecla enter pero ahora lanzandome el error : "Uncaught RangeError: Maximum call stack size exceeded" y dentro del elemento "boton2" (uso textContent para mostrar el contador en un div) me tira unos numeros extraños

const boton2 = document.querySelector(".boton2")
    
    let contador2 = 0
    let funcion2 = function(event){
        if(event.key=="Enter") contador2++;
        boton2.textContent = `${contador2}`
        if(contador2>10) removeEventListener("keyup",funcion2(event));
    }
    
    addEventListener("keyup",event => funcion2(event)) 

he probado muchas cosas pero estoy a ciegas, simplemente no se que esta ocurriendo. Si alguien sabe y me lo explica se lo agradeceria.

1 respuesta 1

3

Veo dos problemas. Cuando añades el event listener, lo hace así

addEventListener("keyup",event => funcion2(event))

Esto en realidad crea una función flecha, que es la que realmente estás registrando y luego esta llama a función2

Por otro lado, cuando eliminas el event listener, lo haces de esta manera

removeEventListener("keyup",funcion2(event));

Pretendes eliminar la escucha capturada por funcion2, pero como dije arriba, lo que registraste no es funcion2 sino la función flecha. Por otro lado, tampoco estarías "des-registrando" la funcion2, sino lo que devuelve la funcion2, ya que al poner los paréntesis, lo que realmente estás haciendo es llamarla y pasándole a removeEventListener el valor devuelto.

Para solucionarlo, cambia el addEventListener por

addEventListener("keyup", funcion2)

Como ves, ahora estamos registrando la función. De igual manera, al eliminarla, cambia el removeEventListener por

removeEventListener("keyup",funcion2);

Y una última cosa, aunque no tiene nada que ver con lo anterior, si pretendes contar hasta 10, la comparación debería decir así

if(contador2 >= 10)

o bien

if(contador2 > 9)

ya que en caso contrario, al hacerse la comparación después de mostrar el dato, contaría hasta 11.

1
  • Gracias por tu respuesta! igual era una tonteria :( el div que muestra el contador antes era un input y me olvide de sacarle la propiedad type="button", se lo saque y ya me funciona bien no tuve que cambiar nada, gracias igual Commented el 7 ago. 2022 a las 21:16

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.