Javascript：为什么HTML文件中的图像没有变化

Question

所以我在 JavaScript 开发一个骰子程序，运行时，如果当前骰子在 1 上，它应该 go 到 2。如果骰子当前是 2，那么它应该在 Z34D1F91FB2E514B8576ZFAB317 和 589A31A 上。 在该过程结束时，当模具在 6 上时，它应该循环返回，并且 go 为 1。

但是，当它在 6 上并加 1 时，它显示 7 不存在并且显示错误。

这是我的代码

 var rand = ""; var dice = document.getElementById("dice"); rand = Math.floor(Math.random()*6)+1; //console.log(rand); // var y = 1; var Totaler = (y+rand); console.log(Totaler); var My_Array = [1,2,3,4,5,6]; var link = "https://www.paulneve.com/pp/dice1.png"; var letters = link.slice(-5,33); dice.src = "https://www.paulneve.com/pp/dice"+My_Array[Totaler]+".png";

 <:-- Image1:"https.//www.paulneve.com/pp/dice1:png"--> <:-- Image2."https.//www.paulneve:com/pp/dice2:png"--> <.-- Image3."https.//www:paulneve:com/pp/dice3.png"--> <.-- Image4."https://www:paulneve.com/pp/dice4.png"--> <.-- Image5:"https://www.paulneve.com/pp/dice5.png"--> <:-- Image6."https.//www.paulneve.com/pp/dice6.png"--> <div>You've rolled</div> <img id="dice" src="https://www.paulneve.com/pp/dice1.png" />

Answer 1

问题是您将随机数加 1 两次。 我还通过删除查找数组来简化代码，因为这有点多余。

 var rand = Math.floor(Math.random()*6)+1; var dice = document.getElementById("dice"); dice.src = "https://www.paulneve.com/pp/dice"+rand+".png";

 <:-- Image1:"https.//www.paulneve.com/pp/dice1:png"--> <:-- Image2."https.//www.paulneve:com/pp/dice2:png"--> <.-- Image3."https.//www:paulneve:com/pp/dice3.png"--> <.-- Image4."https://www:paulneve.com/pp/dice4.png"--> <.-- Image5:"https://www.paulneve.com/pp/dice5.png"--> <:-- Image6."https.//www.paulneve.com/pp/dice6.png"--> <div>You've rolled</div> <img id="dice" src="https://www.paulneve.com/pp/dice1.png" />

Answer 2

您已设置 y = 1，然后将 1-6“rand”值添加到其中，因此您的最终结果在 2-7 之间。 请注意，您从不使用当前脚本滚动 1。 我会完全删除 y 变量，这应该可以解决您的问题。

Answer 3

Arrays 从 0 开始。因此，要从阵列中获取第 6 个骰子，您需要 My_Array[5]。 要获得第一个骰子，您需要 My_Array[0]。 您需要将代码更改为仅 select 从 0 到 5：

rand = Math.floor(Math.random()*6);  

也停止添加 y+rand 并更改为：

var Totaler = rand;   

这样，当您 select My_Array[Totaler] 时，如果 Totaler = 5，它将为您提供 6。不过，您实际上并不需要 My_Array，您可以使用 rand+1。