1

Estoy haciendo un trabajo de un curso que estoy haciendo de JavaScript. Le puse un eventlistener a un botón y por alguna razón que no logro encontrar, el código dentro de el se ejecuta 4 veces.

Se supone que es un juego de colores en el que con javascript le doy colores a unos cuadrados creados con html. Perdón si falta alguna información necesaria, es mi primera vez preguntando en stackoverflow

let botonstart = document.querySelector("#play");

botonstart.addEventListener("click", function(){
    document.querySelector(".message").textContent = ""
    document.querySelector(".titulo").style.color = "rgb(255, 255, 255)";
    document.querySelector("#play").innerHTML = "Restart"
    btndif.disabled = true;
    for (let i = 0; i < numsquare; i++) {
        colors.push(colorRandom()); // se guarda el color, que se genera aleatoriamente en el metodo, dentro del arreglo
        square[i].style.backgroundColor = colors[i]; //se asigna el color al cuadrado
        square[i].addEventListener("click", changeColors)
    }
    pickColor(); //se llama al metodo pickcolor para selecionar aleatoriamente el color a adivinar
    document.querySelector("span").textContent = pickedColor;
});

Código HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Game</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container text-center">
    <h1 class="titulo">The Great <span class="colorDisplay"></span> Guessing Game</h1>
    <br>
  </div>

  <div id="div-message">

    <div class="row">
      <div class="col-6">

        <div class="navbar">
          <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dificultad
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#" id="facil">Facil</a>
              <a class="dropdown-item" href="#" id="normal">Normal</a>
              <a class="dropdown-item" href="#" id="dificil">Dificil</a>
              <a class="dropdown-item" href="#" id="demente">Demente</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="message text-center">&nbsp;</div>
      </div>
    </div>
  </div>

  <br>

  <div class="container text-center">
    <div class="row">
      <div class="col-12">
        <div class="square" id="sq0"></div>
        <div class="square" id="sq1"></div>
        <div class="square" id="sq2"></div>
        <div class="square" id="sq3"></div>
        <div class="square" id="sq4"></div>
        <div class="square" id="sq5"></div>
      </div>
      <div class="col-12">
        <div class="square" id="sq6"></div>
        <div class="square" id="sq7"></div>
        <div class="square" id="sq8"></div>
        <div class="square" id="sq9"></div>
        <div class="square" id="sq10"></div>
        <div class="square" id="sq11"></div>
      </div>
      <div class="col-12">
        <div class="square" id="sq12"></div>
        <div class="square" id="sq13"></div>
        <div class="square" id="sq14"></div>
        <div class="square" id="sq15"></div>
        <div class="square" id="sq16"></div>
        <div class="square" id="sq17"></div>
      </div>
      <div class="col-12">
        <div class="square" id="sq18"></div>
        <div class="square" id="sq19"></div>
        <div class="square" id="sq20"></div>
        <div class="square" id="sq21"></div>
        <div class="square" id="sq22"></div>
        <div class="square" id="sq23"></div>
      </div>
    </div>



    <br>
    <button type="button" id="play" class="btn btn-success">Play!</button>
  </div>

  </div>


  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
  </script>
  <script src="https://kit.fontawesome.com/eeb28b5c66.js" crossorigin="anonymous"></script>
  <script src="./script.js"></script>
</body>

</html>

Código de JavaScript:

let square = document.querySelectorAll(".square"); //arreglo de "cuadrados"
let colors = []; //arreglo para guardar colores utilizados por los cuadrados
let pickedColor; //variable para guardar el color seleccionado para jugar
let flag = false;
let dif = document.querySelector(".dropdown-menu").children
let numsquare = 24;
let btndif = document.getElementById("dropdownMenuButton")
let start = true;
let botonstart = document.querySelector("#play");

for (let i = 0; i < dif.length; i++) {
    dif[i].addEventListener("click", function () {
        if (this.textContent == "Facil") {
            dificultad(3, "square1", "square");
            numsquare = 3;
        } else if (this.textContent == "Normal") {
            dificultad(6, "square1", "square");
            numsquare = 6;

        } else if (this.textContent == "Dificil") {
            dificultad(12, "square", "square1");
            numsquare = 12;

        } else {
            dificultad(24, "square", "square1");
            numsquare = 24;
        }

    })

    botonstart.addEventListener("click", function(){
        document.querySelector(".message").textContent = ""
        document.querySelector(".titulo").style.color = "rgb(255, 255, 255)";
        document.querySelector("#play").innerHTML = "Restart"
        btndif.disabled = true;
        for (let i = 0; i < numsquare; i++) {
            colors.push(colorRandom()); // se guarda el color, que se genera aleatoriamente en el metodo, dentro del arreglo

            square[i].style.backgroundColor = colors[i]; //se asigna el color al cuadrado

            square[i].addEventListener("click", changeColors)

        }

        pickColor(); //se llama al metodo pickcolor para selecionar aleatoriamente el color a adivinar

        document.querySelector("span").textContent = pickedColor;
     
       

    });

    function colorRandom() {

        let color = "rgb(";

        for (let i = 0; i < 3; i++) { // el for da 3 vueltas, para cumplic con el codigo rgb


            if (i == 2) {

                color += (Math.round(Math.random() * 256 - 1).toString()).concat(")"); //se genera aleatoriamente un numero entre 0 y 255 y luego se concatena en la variable local color

            } else {

                color += (Math.round(Math.random() * 256 - 1).toString()).concat(", "); //se genera aleatoriamente un numero entre 0 y 255 y luego se concatena en la variable local color

            }
        }
        return color;
    }

    function pickColor() {
        pickedColor = "";
        let index = Math.round(Math.random() * colors.length - 1);
        if (index < 0)
            index = 1;

        pickedColor = colors[index]; //se elige aleatoriamente el color a partir del arreglo que contiene los colores usados por los cuadrados
        colors = [];
    }

    function changeColors() { //se crea un evento para cada cuadrado

        let clickedColor = this.style.backgroundColor; //se asigna el color del cuadrado cliqueado dentro de la variable
        if (clickedColor == pickedColor) {
            for (let i = 0; i < square.length; i++) { //si coincide con el seleccionado para jugar, todos los cuadrados tendrán el mismo color

                square[i].style.backgroundColor = pickedColor;
                document.querySelector("h1").style.color = pickedColor;

            }
            document.querySelector(".message").textContent = "Correct!"
            btndif.disabled = false;
            botonstart.innerHTML = "Play Again?"
        } else {

            this.style.backgroundColor = "rgb(35, 35, 35)"; //si no coincide, el cuadrado cliqueado será de ese color
            document.querySelector(".message").textContent = "Try Again"
        }

    }

    function dificultad(squares, classuse, classdel) {

        for (let i = squares; i < square.length; i++) {

            square[i].classList.add("hide")
        }

        for (let i = 0; i < squares; i++) {
            square[i].classList.remove("hide")
            square[i].classList.remove(classdel)
            square[i].classList.add(classuse)

        }

    }

}
7
  • Te sugiero colocar también tu HTML. Es probable que se esté propagando el evento y para eso debes de usar el parametro de la funcion del evento y ejecutar el metodo stopPropagation()
    – DarkVaderM
    Commented el 26 ago. 2021 a las 2:53
  • 2
    Que sería numsquare? Commented el 26 ago. 2021 a las 3:45
  • Como dice el primer comentario, agrega tambien el HTML y toda la función JS respectiva Commented el 26 ago. 2021 a las 14:34
  • @DarkVaderM ahi coloqué el codigo en GitHub, pues no pude formatearlo para que quedase prolijo. github.com/leaa98/colorgame/tree/main/colorGame Commented el 26 ago. 2021 a las 19:26
  • @PauloUrbanoRivera es el numero de cuadrados que debe recorrer el arreglo y darles un color al azar utlizando la función colorRandom() Commented el 26 ago. 2021 a las 19:27

1 respuesta 1

1

Tienes un bucle for en el que en cada iteración se ejecuta la línea sentencia:

botonstart.addEventListener("click", function(){ ... })

Por lo que estás añadiendo N veces un "event listener" al botón start.

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.