當我按下影像時，我想制作簡單的骰子游戲，每一個都只改變一次，這是否意味著我總共可以改變數字 2 次。問題是什么？
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);
});
}uj5u.com熱心網友回復：
單擊發生時，您不會生成亂數。你對每一個骰子只做了一次。相反，您應該只在用戶單擊時生成亂數。
此外，不要在每次迭代中查詢元素：只需在頂部執行一次：
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);
});
}
uj5u.com熱心網友回復：
您需要在點擊時生成號碼，但也請委托
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>如果你只希望他們點擊一次，你可以測驗
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" />轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/416676.html
標籤：