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"> </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)
}
}
}
numsquare
?