在为骰子游戏调用 math.random 图像时遇到一个小问题。当我单击滚动按钮时，图像不会改变。我将图像保存在 .html 文件所在的位置。非常感谢任何帮助!
掷骰子
<script type="text/javascript">
var dieImage;
function start()
{
var button = document.getElementById(rollButton);
button.addEventListener("click", rollDice, false);
dieImage = document.getElementById("die1");
}
function rollDice()
{
setImage(dieImage);
}
function setImage(dieImg)
{
var dieValue = Math.floor(1 + Math.random() * 6);
dieImg.setAttribute("src", "die" + dieValue + ".jpg");
dieImg.setAttribute("alt", "dieImg with" + dieValue + "spots");
if (dieValue == 6)
{
document.getElementById("sometext").innerHTML = "You Win!";
}
else
{
document.getElementById("sometext").innerHTML = "Roll Again";
}
}
window.addEventListener("load", start, false);
</script>
</head>
<body>
<form action = "#">
<input id = "rollButton" type = "button" value = "Roll Dice">
</form>
<li>
<img id = "die1" src = "die1.jpg" alt = "blankImage">
</li>
<div id = "sometext">Roll for a 6!</div>
</body>
最佳答案
上面代码的唯一问题是这一行:
var button = document.getElementById(rollButton);
应该阅读
var button = document.getElementById("rollButton");
上述更改确实会导致功能起作用，并且图像会更新。假设您所有的图像实际上都在正确的位置，您会看到它们发生变化。
作为鼓励，我建议您在 Firefox 中编写代码，并获取 Firebug。有了这些工具，您就可以使用 Firebug 控制台和/或 Firefox 的 Web Developer Error Console。这些对于快速解决此类问题非常有用。
关于javascript 骰子游戏 - 图像不会改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10462132/