-1

llevo bastante rato trasteando para que funcione, y no soy capaz. Estoy tratando de hacer un simón dice, lo tengo prácticamente acabado (Algo básico si...) pero sólo me falta un detallito, que al hacer click en el color deseado, se activa varias veces la función que tengo en el event listener, de forma que las primeras vueltas en las que se repiten los colores (por ejemplo 3 rojos seguidos) no tengo problema y valida perfectamente... pero una vez cambia algún color, pierdo el juego porque de 1 click coge varias veces el mismo rojo y no puedo seleccionar otro. Os dejo el código abajo por si no me explico bien, y a ver si algún pro me ayuda <3 Thanks

Mi código en jsfiddle

1
  • Copia tu codigo en este sitio y no lleves al usuario a otro sitio. el 14 dic. 2020 a las 3:26

2 respuestas 2

1

Vengo a desenterrar este post. Tu problema tiene una explicación: no eliminas los eventListener.

¿Por qué? Vi que creaste una función para eliminarlos, sin embargo, el eventListener funciona como un setInterval, no puedes enviar una función anónima y nada más, necesitas una referencia: almacenar tu función en una variable para que Javascript sepa lo que debe eliminar.

¿Por qué razón funciona así? Por ejemplo, podría tener más de una función que se dispara con el mismo evento. Te voy a dar un caso hipotético de cómo podría funcionar Facebook cuando pinchas el ícono de "mensaje nuevo":

  1. Primero, se elimina la notificación en la interface.
  2. Luego, modifica el <title> para quitar la notificación en el browser.
  3. Finalmente, se abre el popup de mensajes.

Groso modo, hay 3 eventos que escuchan el click en un solo objeto y gatillan acciones independientes que manipulan distintos bloques de la UI.

En resumen, como podemos tener muchos eventListener del mismo tipo apuntando todos al mismo elemento del DOM, es indispensable identificar sus callbacks con variables: por esta razón se aconseja utilizar funciones declaradas en lugar de anónimas cuando trabajas con eventos que se montan y desmontan.

// malo, función anónima no se borra
document.getElementById("red").addEventListener("click", function(){/*...*/});

// correcto, función declarada, tienes control sobre ella
const funcAlgo = () => {/*...*/};
document.getElementById("red").addEventListener("click", funcAlgo);
document.getElementById("red").removeEventListener("click", funcAlgo);

Para profundizar sobre el uso de una función anónima vs una declarada, te quiero presentar otro ejemplo:

<button>Trigger</button>

<script>
const btn = document.querySelector('button');

const clicked = () => console.log('declarada');

btn.addEventListener('click', clicked)
btn.addEventListener('click', clicked)
btn.addEventListener('click', clicked)

btn.addEventListener('click', () => console.log('anonima'))
btn.addEventListener('click', () => console.log('anonima'))
btn.addEventListener('click', () => console.log('anonima'))
</script>

Premicia:

  1. Existe un botón que en teoría recibe 6 eventListener, 3 con listener función declarada, 3 con listener función anónima.
  2. Cada función devuelve un console.log para confirma que se están llamando. La función declarada imprime la cadena 'declarada', la anónima imprime 'anónima'.
  3. Cuando se clickea el botón, se disparan "en teoría", 6 eventos: 3 deberían imprimir 'declarada', los otros 3, 'anónima'.

Comportamiento:
La realidad es que solo se imprime 'declarada' una vez y 'anónima' 3 veces. ¿Por qué?

Aquí tienes otra característica de la función declarada: como intervienen sobre el mismo evento click, al ser la misma referencia 3 veces, se sobreescriben. Por el contrario, la función anónima no le dice al sistema que son las mismas: aunque ejecuten la misma acción, son referencias distintas en memoria RAM.

En resumen, con funciones declaradas, se vincula solo una función, ya que la misma se sobreescribe. Con funciones anónimas, cada declaración es independiente e inmanejable. El uso de funciones anónimas en eventListener es específico para proteger determinados comportamientos, ya que al no poder ser "identificadas", no se pueden eliminar del eventListener por el usuario, pero es fundamental no repetirlas.

0

Pues así a lo tonto he conseguido solucionarlo cambiando los listener y dejándolos así...

//Activo los clicks
function ponerClicks(){
document.getElementById("red").addEventListener("click",clickRed);
document.getElementById("green").addEventListener("click",clickGreen);
document.getElementById("blue").addEventListener("click",clickBlue);
document.getElementById("yellow").addEventListener("click",clickRed);
}
//Ya que no soy capaz de controlar las veces que se envía, a ver si así...
function clickRed(){
    clickColor("red");
}
function clickGreen(){
    clickColor("green");
}
function clickBlue(){
    clickColor("blue");
}
function clickYellow(){
    clickColor("yellow");
}

Buenas noches xd

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.