Why is this ending up as concatenation and not addition?

Question

function writeSum() {
  var addendOne = document.getElementById("addendOne").value; 
  var addendTwo = document.getElementById("addendTwo").value;  
  document.getElementById("sum").innerHTML = addendOne + addendTwo;
  }

<input type="number" id="addendOne"> + <input type="number" id="addendTwo"><br>
<button onclick="writeSum()">Answer</button>
<p id="sum"></p>

If I write 4 in the first input and 5 in the second input, I get 45. How do I change this to addition instead of concatenation.

Inputs come in as strings by default. You will need to convert to int — Russ J, Jan 26 '21 at 05:29
with document.getElementById("sum").innerHTML = +addendOne + +addendTwo; — Muhammad Usman, Jan 26 '21 at 05:43

score 4 · Accepted Answer · edited Jan 26 '21 at 06:34

Because you are using strings values

for input you can use parseInt ... or valueAsNumber (only if input[type="number"] )

function writeSum() {
  var addendOne = document.getElementById("addendOne").valueAsNumber; 
  var addendTwo = document.getElementById("addendTwo").valueAsNumber;  
  document.getElementById("sum").innerHTML = addendOne + addendTwo;
  }

<input type="number" id="addendOne"> + <input type="number" id="addendTwo"><br>
<button onclick="writeSum()">Answer</button>
<p id="sum"></p>

Why is this ending up as concatenation and not addition?

1 Answers1