两个随机数与 Javascript 的总和

发布于12月02日

我正在try 用Java脚本创建一个程序，打印两个随机数并计算它们的总和.这应该很容易，但由于某些原因，我不能让程序工作.我有打印随机数字的程序，但我不能让它把数字加在一起.我做错了什么？


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
    <body>

        <p id="myBtn"></p>
        <p id="number1"></p>
        <p id="number2"></p>

        <button id="myBtn" onclick="myFunction()">Get random number</button>


        <script>

            var allNumbers = 0;

            function myFunction() {
                num1 = document.getElementById("number1").innerHTML = Math.floor(Math.random() * (7 - 1) + 1);
                num2 = document.getElementById("number2").innerHTML = Math.floor(Math.random() * (7 - 1) + 1);
                var inTotal = num1 + num2;
                var allNumbers =+ inTotal;
            }

            document.write(allNumbers);

        </script>

    </body>
</html>

推荐答案

您的代码几乎是正确的！以下是一些如何解决这个问题的小贴士:

您有两个元素具有相同的id属性:<p>和<button>元素.在HTML中，id个属性在页面上应该是唯一的，因此您应该将id个属性中的一个属性更改为其他属性.例如，您可以将<button>元素的id更改为"myBtn".
当您单击该按钮时，将调用myFunction()函数，并在<p>个元素中生成并显示随机数，但不会在任何地方显示这些数字的总和.要解决此问题，您可以添加另一个<p>元素，其中将显示数字的总和.
在myFunction()函数中，inTotal变量是该函数的局部变量，因此在函数外部不可用.要解决这个问题，可以添加一个名为total的全局变量来保存这些数字的总和，然后在myFunction()函数中更新total变量.
最后，您将使用document.write()方法来显示数字的总和，但此方法将用输出覆盖整个页面.相反，您可以使用<p>元素的innerHTML属性用这些数字的和来更新元素的内容.

以下是应该可以工作的代码的更新版本:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
    <body>

        <p id="number1"></p>
        <p id="number2"></p>
        <p id="total"></p>

        <button id="myBtn" onclick="myFunction()">Get random number</button>

        <script>
            var total = 0;

            function myFunction() {
                num1 = document.getElementById("number1").innerHTML = Math.floor(Math.random() * (7 - 1) + 1);
                num2 = document.getElementById("number2").innerHTML = Math.floor(Math.random() * (7 - 1) + 1);
                total = num1 + num2;
                document.getElementById("total").innerHTML = total;
            }
        </script>

    </body>
</html>