I am trying to create a simple function in javascript to add two numbers but the result isn't getting displayed,

Question

code:

function add() {
  var first = document.getElementById('n3').value;
  var second = document.getElementById('n4').value;
  return first + second;
}
document.getElementById('n5').innerHTML = add();

<input type="text" id="result"/><br/><br/>
<input type="text" id="n3"/><br/><br/>
<button onclick="add();">+</button><br/><br/>
<input type="text" id="n4"/>
<p id="n5"></p>

The line where you set the value of `n5` is not in the `add()` function so when do you think that code is executed? — 001, Nov 18 '18 at 12:57
Can you please edit the code and share it with me? Thanks. @JohnnyMopp — sanchit arora, Nov 18 '18 at 13:00

score 2 · Answer 1 · answered Nov 18 '18 at 12:57

Add the assignment to n5 into the add function.

Also, don't forget to cast your input into Number.

function add() {
  var first = document.getElementById('n3').value;
  var second = document.getElementById('n4').value;
  document.getElementById('n5').innerHTML = (Number(first) + Number(second));
}

<input type="text" id="n3"/><br/><br/>
<button onclick="add();">+</button><br/><br/>
<input type="text" id="n4"/>
<p id="n5"></p>

The fourth bird · Answer 2 · 2018-11-18T13:08:51.077

Update your code to add the value inside the function. Your values are strings and using + will concatenate them. For example 4 + 5 will then become 45.

Convert your value using parseInt to convert it to an int and add the radix, or use Number:

function add() {
    var first = document.getElementById('n3').value;
    var second = document.getElementById('n4').value;
    document.getElementById('n5').innerHTML = parseInt(first, 10) + parseInt(second, 10);;
}

score 0 · Answer 3 · answered Nov 18 '18 at 13:05

look these code you could find your mistake:

function add() {
  var first = document.getElementById('n3').value;
  var second = document.getElementById('n4').value;
  var sum=parseInt(first) +  parseInt(second);
  $('#result').val(sum); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="n3"/><br/><br/>
<input type="text" id="n4"/>
<button onclick="add();">+</button><br/><br/>
<input  id="result"/>

score 0 · Answer 4 · answered Nov 18 '18 at 13:07

Just move the innerHTML setting of n5 inside the add() and convert it number with preceeding +. Also I just remove the unused <input type="text" id="result"/><br/><br/> line of code.

function add() {
  var first = document.getElementById('n3').value;
  var second = document.getElementById('n4').value;
  document.getElementById('n5').innerHTML= +first + +second;
}

<input type="text" id="n3"/><br/><br/>
<button onclick="add();">+</button><br/><br/>
<input type="text" id="n4"/>
<p id="n5"></p>

I am trying to create a simple function in javascript to add two numbers but the result isn't getting displayed,

4 Answers4