My Loop work just 2 times(Javascript Dice Game)
You are not generating the random number when the click happens. You have done that just once for every die. Instead you should only generate the random number when the user has clicked.
Also, don't query for the elements in each iteration: just do this once at the top:
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);
});
}
You need to generate the number on click, but please also delegate
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>If you only want them to click once, you can test
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" />