Sum of two random numbers with Javascript

I’m trying to create a program with Javascript that prints two random numbers and calculates their sum. It should be really easy, but for some reason I can’t get the program to work. I’ve got the program to print random numbers, but I can’t get it to add the numbers together. What am I doing wrong?

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

Answer

Your code is almost correct! Here’s a few tips on how to fix it:

You have two elements with the same id attribute: the <p> and the <button> element. In HTML, id attributes should be unique on a page, so you should change one of the id attributes to something else. For example, you could change the id of the <button> element to “myBtn”.
When you click the button, the myFunction() function is called and the random numbers are generated and displayed in the <p> elements, but the sum of the numbers is not displayed anywhere. To fix this, you can add another <p> element where the sum of the numbers will be displayed.
In the myFunction() function, the inTotal variable is local to the function, so it is not available outside the function. To fix this, you can add a global variable called total that will hold the sum of the numbers, and then update the total variable inside the myFunction() function.
Finally, you are using the document.write() method to display the sum of the numbers, but this method will overwrite the entire page with the output. Instead, you can use the innerHTML property of the <p> element to update the element’s contents with the sum of the numbers.

Here’s an updated version of your code that should work:

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

Advertisement

Answer