Add Two numbers from textbox using JavaScript-CodePudding

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>

CodePudding user response：

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();" />

CodePudding user response：

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>

CodePudding user response：

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>