CODEWITHSUNDEEP
javascripthtmlcss
Aryan Maheshwari
Aryan Maheshwari

Reputation: 3

Input tag not giving correct output

What I want is, on button click the sum of value in two input texts should be consoled, but for Any value for two input texts that I give, it always gives 0,0 as output, what am I doing wrong? And since both of them are 0, their sum is also becoming 0. HTML

<!DOCTYPE html>
<html>
<head>
    <title>WeB </title>
</head>
<body>
    <input type="number" id = "num1" >
    <input type="number" id = "num2" >
    <button id = "add">+</button>
    <script src = "app.js"></script>
</body>
</html>

JS

let num1 = Number(document.getElementById('num1').value)
let num2 = Number(document.getElementById('num2').value)

document.getElementById("add").addEventListener("click",function(){
    console.log(num1,num2);
    console.log(num1+num2);

})

Upvotes: 0

Views: 30

Answers (2)

Quentin
Quentin

Reputation: 943605

This is the order of events:

  1. You read the values of the inputs (empty strings) and convert them to numbers (0) then store them in variables
  2. You bind an event listener to add those numbers together when something is clicked
  3. You type something into the inputs
  4. You click the button which
    1. Logs the values of the variables
    2. adds the values of the variables together

The variables still contain the values from the time you read the inputs

You need to move step 1 so it goes inside step 4 (i.e. inside the function you use as the event listener)

Upvotes: 0

brk
brk

Reputation: 50291

You need to get the latest value of the input on click of the button

document.getElementById("add").addEventListener("click", function() {

  let num1 = Number(document.getElementById('num1').value)
  let num2 = Number(document.getElementById('num2').value)


  console.log(num1, num2);
  console.log(num1 + num2);

})
<input type="number" id="num1">
<input type="number" id="num2">
<button id="add">+</button>

Upvotes: 1

Related Questions