簡體   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