Tengo dos dados. Cuando hago clic en el botón, los dados se aleatorizan. Pero, cuando vuelvo a hacer clic en el botón, la función ya no se ejecuta. ¿Qué puedo hacer para ejecutar la función cada vez que hago clic en el botón?
let arr = ["dice1.png", "dice2.png","dice3.png","dice4.png","dice5.png","dice6.png" ]; let dice1 = document.querySelector(".dice1"); let dice2 = document.querySelector(".dice2"); let rand = arr[Math.floor(Math.random() * arr.length)] let rand2 = arr[Math.floor(Math.random() * arr.length)] let button = document.querySelector("button"); function game () { let title = document.querySelector("h1"); dice1.src = "/images/" + rand dice2.src = "/images/" + rand2 if (rand > rand2) { title.textContent = "Player 1 WIN" } else if (rand2 > rand) { title.textContent = "Player 2 WIN" } else if (rand2 === rand) { title.textContent = "EQUALS" } else{ return } } button.addEventListener ("click", () => { game(); })Si mueve sus definiciones de variables rand y rand2 dentro del game() , debería funcionar. Actualmente, solo está generando números aleatorios cuando la secuencia de comandos se carga inicialmente (no al hacer clic en el botón), y luego se usan al hacer clic en el botón cada vez, pero los números no se están regenerando, por lo que parece que no es así. laboral.
Además, puede llamar al game() en la carga de la página si desea que se ejecute la primera vez sin hacer clic en un botón.
Nota: inventé un HTML de ejemplo porque no estaba incluido en su pregunta, pero esto debería darle una idea de cómo hacerlo.
let arr = ["dice1.png", "dice2.png","dice3.png","dice4.png","dice5.png","dice6.png" ]; let dice1 = document.querySelector(".dice1"); let dice2 = document.querySelector(".dice2"); let button = document.querySelector("button"); let title = document.querySelector("h1"); function game () { // regenerate these each time this function is run let rand = arr[Math.floor(Math.random() * arr.length)] let rand2 = arr[Math.floor(Math.random() * arr.length)] dice1.src = "/images/" + rand dice2.src = "/images/" + rand2 if (rand > rand2) { title.textContent = "Player 1 WIN" } else if (rand2 > rand) { title.textContent = "Player 2 WIN" } else if (rand2 === rand) { title.textContent = "EQUALS" } else{ return } } button.addEventListener ("click", () => { game(); }) game(); // run it on page load if desired <h1>title</h1> <img class="dice1" /> <img class="dice2" /> <button>Roll</button>Porque pones tus iniciales en este bloque solo una vez.
let arr = ["dice1.png", "dice2.png","dice3.png","dice4.png","dice5.png","dice6.png" ]; let dice1 = document.querySelector(".dice1"); let dice2 = document.querySelector(".dice2"); let rand = arr[Math.floor(Math.random() * arr.length)] let rand2 = arr[Math.floor(Math.random() * arr.length)] let button = document.querySelector("button");Pero necesita los valores rand, rand2 en cada clic. Pon estos dos vars en tu función de código.