Question

在为骰子游戏调用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>

Answer 1

上面代码的唯一问题是这一行：

var button = document.getElementById(rollButton);

应该阅读

var button = document.getElementById("rollButton");

上述更改会导致功能正常工作，以及要更新的图像。假设您的所有图像实际上都在正确的位置，您将看到它们发生变化。

作为一个鼓励的提示，我建议你在Firefox中编写代码，然后获取Firebug。使用这些工具，您可以使用Firebug控制台和/或Firefox的Web开发人员错误控制台。这些对于快速解决这类问题非常有用。

javascript骰子游戏 - 图像不会改变

1 个答案: