Add Two numbers from textbox using JavaScript

Question

I was just trying to write a simple javascript program that will demonstrate to take user input from text field, and clicking the button will display the summation result of those number in a paragraph. But unfortunately the below code is not working. Clicking the button shows NAN in the Paragraph.

<input type="text" name="" id="num1"><br><br>
<input type="text" name="" id="num2"><br> <br>
<button id="add">Answer</button>
<br>
<p id="para"></p>
<script>
    let num1=parseInt(document.getElementById("num1"));
    let num2=parseInt(document.getElementById("num2"));
    let add=document.getElementById("add");

    add.addEventListener("click",function(){
    document.getElementById("para").innerHTML=num1+num2;

});

</script>

Related SO question : stackoverflow.com/questions/6462772/… — Yogi
– Yogi, Commented Mar 25, 2022 at 19:03

BeerusDev · Accepted Answer · 2022-03-25 18:57:43Z

2

You are getting the elementById, but not getting that IDs value.

Add .value on the end of your getElementById

function addTogether()
{
  var val1 = document.getElementById('val1').value;
  var val2 = document.getElementById('val2').value;

  var sum = parseInt(val1) + parseInt(val2);
  console.log(sum);
}

<input type="text" id="val1" />
<input type="text" id="val2" />
<input type="button" value="Add Them Together" onclick="addTogether();" />

answered Mar 25, 2022 at 18:57

BeerusDev

1,5193 gold badges15 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DCR · Accepted Answer · 2022-03-25 18:57:31Z

1

you need to get the value of num1 and num2 and you need to get the value after you click -- so inside your function

<input type="text" name="" id="num1"><br><br>
<input type="text" name="" id="num2"><br> <br>
<button id="add">Answer</button>
<br>
<p id="para"></p>
<script>
    
    let add=document.getElementById("add");
    
    add.addEventListener("click",function(){
    let num1=parseInt(document.getElementById("num1").value);
    let num2=parseInt(document.getElementById("num2").value);
    
   
    
    document.getElementById("para").innerHTML=num1+num2;
});

</script>

answered Mar 25, 2022 at 18:57

DCR

15.8k13 gold badges61 silver badges131 bronze badges

Comments

Shesh Narayan Deshmukh · Accepted Answer · 2022-03-25 19:34:54Z

You can simply do it like this

<input type="text" id="num1"><br><br>
<input type="text" id="num2"><br><br>
<button id="add">Answer</button><br>
<p id="para"></p>
<script>
    let add=document.getElementById("add");
    add.addEventListener("click",function(){
       var num1 = document.getElementById('num1').value;
       var num2 = document.getElementById('num2').value;
       var res = parseInt(num1) + parseInt(num2);
       document.getElementById("para").innerHTML = res ;
    });
</script>

here is the demo of working code

let add=document.getElementById("add");

add.addEventListener("click",function(){
  var num1 = document.getElementById('num1').value;
  var num2 = document.getElementById('num2').value;
  var res = parseInt(num1) + parseInt(num2);
  document.getElementById("para").innerHTML = res ;
});

<input type="text" id="num1"><br><br>
<input type="text" id="num2"><br><br>
<button id="add">Answer</button>
<br>
<p id="para"></p>

Collectives™ on Stack Overflow

Add Two numbers from textbox using JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related