Sum being zero when calculated using javascript

user_9821036 0
Viewed 71

var num1=document.getElementById("number1");
var num2=document.getElementById("number2");

var k=Number(num1.value);
var l=Number(num2.value);

function add(){
    onCout(k,l,function result(a,b){
                return a+b;
    });
}



function onCout(c,d,callback){
    var result=callback(c,d);
    output.innerHTML=result;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   Num1: <input type="text" id="number1" />
   Num2: <input type="text" id="number2" />
   <div id="output"></div>
   <button id="add" onclick="add()">Add</button>
</body>
</script>
</html>

i want to calculate the sum of two input text field when user clicks the add button.But when I did console.log(k); I am getting zero.I dont know hoe it became zero.I also searched how to take the value from text field and they way to take is using document.getElementById("id").value.I have done the same but my result is not coming.

html javascript
4 Answers

Get the value of k & l inside the add function. That is because before clicking the button those values are empty

var num1 = document.getElementById("number1");
var num2 = document.getElementById("number2");



function add() {
  var k = Number(num1.value);
  var l = Number(num2.value);
  onCout(k, l, function result(a, b) {
    return a + b;
  });
}



function onCout(c, d, callback) {
  var result = callback(c, d);
  output.innerHTML = result;
}
Num1: <input type="text" id="number1" /> Num2: <input type="text" id="number2" />
<div id="output"></div>
<button id="add" onclick="add()">Add</button>

You are getting 0 because initially the fields are empty and Number('') will give 0

var num1 = document.getElementById("number1");
var num2 = document.getElementById("number2");

var k = Number(num1.value);
var l = Number(num2.value);
console.log(num1.value, num2.value) // value is empty string
console.log(k, l); // NUmber('') is 0

function add() {
  onCout(k, l, function result(a, b) {
    return a + b;
  });
}



function onCout(c, d, callback) {
  var result = callback(c, d);
  output.innerHTML = result;
}
Num1: <input type="text" id="number1" /> Num2: <input type="text" id="number2" />
<div id="output"></div>
<button id="add" onclick="add()">Add</button>

user_21813970

You are getting 0 because youre getting the values of k and l on page load and not inside your add function which gets called on button click.

user_109410490

You should get the updated values inside the function instead of getting the initials one on load, this can be done as follows:

function add(){
     var k=Number(num1.value);
     var l=Number(num2.value);
     onCout(k,l,function result(a,b){
          return a+b;
     });
}
user_74863130 
var k=Number(num1.value);
var l=Number(num2.value);

the value must be fetched inside the function add(), as the values will be dynamic.

In the code shown in question, values are fetched only once which makes them pointing to initial only and not change dynamically with user input

var num1=document.getElementById("number1");
var num2=document.getElementById("number2");


function add(){
    var k=Number(num1.value);
    var l=Number(num2.value);
    onCout(k,l,function result(a,b){
                return a+b;
    });
}



function onCout(c,d,callback){
    var result=callback(c,d);
    output.innerHTML=result;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   Num1: <input type="text" id="number1" />
   Num2: <input type="text" id="number2" />
   <div id="output"></div>
   <button id="add" onclick="add()">Add</button>
</body>
</script>
</html>

user_50121750
Related