Quiero hacer un juego de dados simple cuando presiono las imágenes, cada una de ellas cambió solo una vez, eso significa que puedo cambiar el número 2 veces en total. ¿Cuál es el problema?
let dicelenght = document.querySelectorAll('img').length; for(let i=0; i<dicelenght;i++) { let randomNum = Math.floor(Math.random()*6) + 1; let randomDice = "images/dice" + randomNum + ".png"; let Dice = document.querySelectorAll('img'); Dice[i].addEventListener("click", function(){ Dice[i].setAttribute('src', randomDice); }); }No está generando el número aleatorio cuando ocurre el clic. Lo has hecho solo una vez por cada dado. En su lugar, solo debe generar el número aleatorio cuando el usuario haya hecho clic.
Además, no consulte los elementos en cada iteración : solo haga esto una vez en la parte superior:
let dice = document.querySelectorAll('img'); for (let die of dice) { die.addEventListener("click", function(){ let randomNum = Math.floor(Math.random()*6) + 1; let randomDieSrc = "images/dice" + randomNum + ".png"; die.setAttribute('src', randomDieSrc); }); }Debe generar el número al hacer clic, pero también delegar
document.getElementById("diceDiv").addEventListener("click", function(e) { const img = e.target.closest("img") if (img) { let randomNum = Math.floor(Math.random() * 6) + 1; img.setAttribute('src', `images/dice${randomNum}.png`); img.setAttribute('alt', randomNum); } }); <div id="diceDiv"> <img id="d1" alt="d1"/><img id="d2" alt="d2"/><img id="d3" alt="d3"/><br> <img id="d4" alt="d4"/><img id="d5" alt="d5"/><img id="d6" alt="d6"/> </div>Si solo desea que hagan clic una vez, puede probar
const diceDiv = document.getElementById("diceDiv") diceDiv.addEventListener("click", function(e) { const img = e.target.closest("img") if (img) { if (!img.alt.includes("d")) return; // already clicked let randomNum = Math.floor(Math.random() * 6) + 1; img.setAttribute('src', `images/dice${randomNum}.png`); img.setAttribute('alt', randomNum); } }); document.getElementById("reset").addEventListener("click", function(e) { diceDiv.querySelectorAll("img").forEach(img => img.alt = img.id); }) <div id="diceDiv"> <img id="d1" alt="d1" /><img id="d2" alt="d2" /><img id="d3" alt="d3" /><br> <img id="d4" alt="d4" /><img id="d5" alt="d5" /><img id="d6" alt="d6" /> </div> <input id="reset" type="button" value="Reset" />