文章/答案/技术大牛

发布

社区首页 >问答首页 >我的循环只工作2次(Javascript骰子游戏)

问我的循环只工作2次(Javascript骰子游戏)
EN

Stack Overflow用户

提问于 2022-01-20 11:14:54

回答 2查看 56关注 0票数 -1

我想做一个简单的骰子游戏，当我按下图片，他们中的每一个只改变了一次，这是否意味着我可以改变数字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);
     });
 }

javascript

loops

for-loop

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-01-20 11:21:44

当单击发生时，您不会生成随机数。你每死一次就这么做了。相反，您应该只在用户单击时生成随机数。

另外，不要在每次迭代中查询元素:只需在顶部执行一次：

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);
     });
 }

票数 1

Stack Overflow用户

发布于 2022-01-20 11:21:55

您需要在单击时生成数字，但也请委托

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" />

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70785203

复制

相似问题

问我的循环只工作2次(Javascript骰子游戏)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的循环只工作2次(Javascript骰子游戏)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的循环只工作2次(Javascript骰子游戏)
EN