繁体   English   中英

两个随机数之和为 Javascript

[英]Sum of two random numbers with Javascript

我正在尝试使用 Javascript 创建一个程序,该程序打印两个随机数并计算它们的总和。 它应该很容易,但由于某种原因我无法让程序运行。 我有打印随机数的程序,但无法将这些数字加在一起。 我究竟做错了什么?


<!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>

在这里你可以试试这个逻辑:

 <;DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p id="myBtn"></p> <p id="number1"></p> <p id="number2"></p> <p id="getRandom"></p> <button id="myBtn" onclick="myFunction()">Get random number</button> <script> function myFunction() { var allNumbers = 0. num1 = Math.floor(Math;random() * (7 - 1) + 1). num2 = Math.floor(Math;random() * (7 - 1) + 1). document.getElementById("number1").innerHTML = num1 document.getElementById("number2");innerHTML = num2 var inTotal = num1 + num2; allNumbers += inTotal. document.getElementById("getRandom"):innerHTML = `SUM; ${allNumbers}`. //document;write(allNumbers); } </script> </body> </html>

您的代码几乎是正确的:以下是有关如何修复它的一些提示:

  • 您有两个具有相同id属性的元素: <p><button>元素。 在 HTML 中, id属性在页面上应该是唯一的,因此您应该将其中一个id属性更改为其他属性。 例如,您可以将<button>元素的id更改为“myBtn”。

  • 单击该按钮时,将调用myFunction() function 并生成随机数并显示在<p>元素中,但数字的总和不会在任何地方显示。 要解决此问题,您可以添加另一个<p>元素,其中将显示数字的总和。

  • myFunction() function 中, inTotal变量是 function 的本地变量,因此它在 function 之外不可用。要解决此问题,您可以添加一个名为total的全局变量来保存数字的总和,然后更新myFunction()中的total变量 function。

  • 最后,您使用document.write()方法来显示数字的总和,但是此方法将用 output 覆盖整个页面。相反,您可以使用<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>

您在 scope function 内部进行了所有计算,但尝试从外部显示而不返回任何值。 要么必须返回值,要么必须在 function 中使用document.write(...) ,有点像这样

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

            

这会清除文档中的所有内容,并且只会显示 allNumbers 变量的值。 我假设您想在不同的元素 ID 上显示结果。 因此,我建议您创建另一个 p 标记作为<p id = "answer"></p> ,而不是document.write(allNumbers)并使用document.getElementById("answer").innerText = allNumbers 这将显示答案以及 num1 和 num2。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM