Sum of two random numbers with Javascript-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

You need to update the result inside myFunction()

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

        <p id="number1"></p>
        <p id="number2"></p>
        Result: <span id="result"></span><br/>
        <button id="myBtn" onclick="myFunction()">Get random number</button>
        <script>
            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.getElementById("result").innerText = allNumbers
            }
        </script>
    </body>
</html>

CodePudding user response：

Here you can try this logic :

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

CodePudding user response：

There are a few issues which I can see immediately:

You are using var. You should be using let or const for variable declarations
As flyingfox pointed out in their comment, you are also redeclaring allNumbers inside your function. Here, it should just be allNumbers = inTotal;
You are using the plus equals operator in the wrong order. What you have currently is really this: var allNumbers = parseInt(inTotal);. The plus is a shorthand for parseInt. Swap them to be: all numbers = inTotal
Use of the document.write() method is strongly discouraged. Link to MDN and further explaination why here
You are using the onclick attribute on the button element. I would recommend removing that entirely, and select it in the JavaScript by it's ID
I'd recommend saving the random num1 and num2 variables as the result of Math.floor separate. This is more about readability than anything
I'd also recommend place the JavaScript in a separate file, and linking to it via a script tag using the src attribute. It's better to separate things as it will make it easier to manage. I understand this is a very small, simple beginner app, but I would argue it's best to get into the habit of doing it sooner rather than later
Use are using the id myBtn twice. Once on the top <p> tag, and the other on the button
Your main function name is not that meaningful. I would recommend updating it to something like sumOfTwoRandomNumbers

Here is what your code could look like with those points in mind:

HTML (index.html):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <p id="number1"></p>
    <p id="number2"></p>
    <p id="result"></p>

    <button id="myBtn">Get random number</button>

    <script src="app.js"></script>
  </body>
</html>

JavaScript (app.js):

const number1El = document.getElementById("number1");
const number2El = document.getElementById("number2");
const resultEl = document.getElementById("result");
const myBtnEl = document.getElementById("myBtn");

function sumOfTwoRandomNumbers() {
  const num1 = Math.floor(Math.random() * (7 - 1)   1);
  const num2 = Math.floor(Math.random() * (7 - 1)   1);
  const result = num1   num2;

  number1El.textContent = num1.toString();
  number2El.textContent = num2.toString();
  resultEl.textContent = result;
}

myBtnEl.addEventListener("click", sumOfTwoRandomNumbers);

CodePudding user response：

You did all the calculation inside the scope function but tried displaying from the outside without returning any value. Either you have to return the value or you have to use document.write(...) inside the function, somewhat like this

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

That would erase everything on the document and only the value of the allNumbers variable will be displayed. I'm assuming you want to display result on the different element id. So, Instead of document.write(allNumbers), I advise you create another p tag as <p id = "answer"></p> and use document.getElementById("answer").innerText = allNumbers. This will display the answer along with num1 and num2.