simple javascript addition, where am I going wrong?

Question

I'm trying to get it to add the two numbers inputted by the user, and print it inside of the p tag. Any help would be much appreciated. Here's the code:

<html>
<!DOCTYPE HTML>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<head>
    <title>Calculator</title>
</head>
<body>
    <h2>Enter in the values you want to add</h2>
    <form>
        <input id="num1" name="num1" type="number"> //value one
        </br>
        <input id="num2" name="num2" type="number"> //value two
        <button id="calculate">Calculate</button> //Click to calculate
    </form>
    <p id="p">The answer will show here</p>
    <script>
        var p1=document.getElementById("p");
        var p=p1.innerHTML;
        var calc=document.getElementById("calculate");
        calc.addEventListener("click", answer); //When the button is clicked it calls the function answer()
        function answer() {
            var num1=document.getElementById("num1");
            var num2=document.getElementById("num2");
            var x=num1.innerHTML;
            var y=num2.innerHTML;
            p=x+y; //print the sum of the two values, inside of the p tag
        }
    </script>
</body>

`.innerHTML` returns a string and not the property itself, hence `p=x+y` won't "output" anything. — Andreas, Aug 30 '18 at 16:20
Possible duplicate of [Adding two numbers concatenates them instead of calculating the sum](https://stackoverflow.com/questions/14496531/adding-two-numbers-concatenates-them-instead-of-calculating-the-sum) — Sebastian Simon, Aug 30 '18 at 16:21
`var x=num1.value` - you need the value of the input - you should also use `parseInt()` - good to read up on — StudioTime, Aug 30 '18 at 16:21
@Xufox I think the fact that nothing at all gets output is as much of a problem — Nick is tired, Aug 30 '18 at 16:27

score 1 · Answer 1 · answered Aug 30 '18 at 16:44

To decode what's going on in your JavaScript, please see my annotations to the code:

var p1=document.getElementById("p");  // Stores a reference to an element with id "p" to variable p1
var p=p1.innerHTML;  // Retrieves the HTML contents of said attribute and assigns it to variable p (not needed)
var calc=document.getElementById("calculate");  // Stores a reference to an element with id "calc" (your button) to variable calc
calc.addEventListener("click", answer);  // Attaches an event handler to the element referenced via variable calc
function answer()
  {
  var num1=document.getElementById("num1");  // Stores a reference to an element with id "num1" in variable num1
  var num2=document.getElementById("num2");  // Stores a reference to an element with id "num2" in variable num2
  var x=num1.innerHTML;  // Retrieves the HTML contents of the element referenced by num1 and stores it in variable x (error)
  var y=num2.innerHTML;  // Retrieves the HTML contents of the element referenced by num2 and stores it in variable y (error)
  p=x+y;  // Since both x and y are strings, they are concatenated and the result is stored in variable p (produces wrong result)
// Missing assignment of result to output element
  }

The problem: You don't have a statement that actually assigns the result to the paragraph marked with ID "p", instead you are modifying a variable.
Furthermore, since you are retrieving strings from the input fields, the addition is in reality a concatenation, producing a false result (num1.value and num2.value are needed to access the actual values). I'd also suggest converting things to an integer - parseInt does the trick here.

score 0 · Answer 2 · answered Aug 30 '18 at 16:41

p = p1.innerHTML

copies the contents of your paragraph into the variable p.

So your

p = x+y

merely assigns a new value to your variable p and doesn't change the innerHTML of your paragraph.

Try

p1.innerHTML = (x + y) + '';   // + '' converts the result of x + y to a string

You should also use '.value' instead of '.innerHTML' to get the contents of your inputs and then convert them to numbers with parseInt() before adding them.

score 0 · Answer 3 · answered Aug 30 '18 at 16:45

There were quite a few issues; you can't copy the innerHTML of a p and then assign it a value. You must convert the input values to integers in order to add them. With inputs you can ask for their "value" rather than innerHTML.

<html>
<!DOCTYPE HTML>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<head>
    <title>Calculator</title>
</head>
<body>
    <h2>Enter in the values you want to add</h2>
    <form>
        <input id="num1" name="num1" type="number"> //value one
        </br>
        <input id="num2" name="num2" type="number"> //value two
        <button id="calculate">Calculate</button> //Click to calculate
    </form>
    <p id="p">The answer will show here</p>
    <script>
        var p1=document.getElementById("p");
        var calc=document.getElementById("calculate");
        calc.addEventListener("click", answer); //When the button is clicked it calls the function answer()
        function answer(e) {
            e.preventDefault();
            var num1=document.getElementById("num1");
            var num2=document.getElementById("num2");
            var x=parseInt(num1.value, 10);
            var y=parseInt(num2.value, 10);
            p1.innerHTML = x+y; //print the sum of the two values, inside of the p tag
        }
    </script>
</body>
</html>

score 0 · Accepted Answer · answered Aug 30 '18 at 16:53

There are several errors in your code, will try to address them one by one:

The <button> by default is type="submit" which when pressed refreshes the whole page, not the intended behaviour. To fix it just need to add type="button", which makes it behabe like a button that by itself does nothing.
The result of p=x+y, you are doing nothing with it. p is just a variable containing the result of the operation, but you need then to insert it inside the <p> tag for it to show up. Adding this at the end of your answer() function should fix it: p1.innerHTML = p;.
The <input> values, those are stored in the value property instead of the innerHTML. So it should look like this var x=num1.value; and var y=num2.value;.
The "sum", in JavaScript the + operator can be used both to add numerical values and to concatenate strings, and the engine chooses what to do guessing by the type of the values you are using, in your case strings. Because even if you type 1 in the input, retrieving it later with .values will return it as a string. You have to cast it back to a number to get the desired result. Just doing this is enought var x=Number(num1.value); and var y=Number(num2.value);.

And that's all.

Here you have your code with the fixes applied.

<html>
<!DOCTYPE HTML>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<head>
    <title>Calculator</title>
</head>
<body>
    <h2>Enter in the values you want to add</h2>
    <form>
        <input id="num1" name="num1" type="number"> //value one
        </br>
        <input id="num2" name="num2" type="number"> //value two
        <button type="button" id="calculate">Calculate</button> //Click to calculate
    </form>
    <p id="p">The answer will show here</p>
    <script>
        var p1=document.getElementById("p");
        var p=p1.innerHTML;
        var calc=document.getElementById("calculate");
        calc.addEventListener("click", answer); //When the button is clicked it calls the function answer()
        function answer() {
            var num1=document.getElementById("num1");
            var num2=document.getElementById("num2");
            var x=Number(num1.value);
            var y=Number(num2.value);
            p=x+y; //print the sum of the two values, inside of the p tag
            p1.innerHTML = p;
        }
    </script>
</body>

Sorry for the lengthy answer but tried to attack each error by itself and it's explanation as clear and simple as I can do.

Thanks for the lengthy answer, I kind of pieced together my rookie mistakes from everyone's help. — Brent, Aug 30 '18 at 17:00

simple javascript addition, where am I going wrong?

4 Answers4