I want to show addition of two number without using any button

Question

I have two input boxes with id no1 and no2. I have to put two integer values on both inputs and show their sum without using any button. My code works, but it shows only the individual values, not the calculated sum.

How can I show my addition value In real time when user is just typing?

var c;
var a = document.getElementById("no1");
var b = document.getElementById("no2");
var number = document.getElementById("number");
var m = document.getElementById("message");

a.onfocus = function() {
  m.style.display = "block";
}

a.onblur = function() {
  m.style.display = "none";
}

a.onkeyup = function() {
  var c;
  if (isNaN(a.value) == false) {
    c = a.value + b.value;
    m.innerHTML = c;
  } else {

    m.innerHTML = "<font color='red' size='45px'><strong>Must containe number only</strong></font>";
  }
}
b.onfocus = function() {
  m.style.display = "block";
}
b.onblur = function() {
  m.style.display = "none";
}
b.onkeyup = function() {

  if (isNaN(b.value) == false) {
    c = a.value + b.value;
    m.innerHTML = c;
  } else {

    m.innerHTML = "<font color='red' size='45px'><strong>Must containe number only</strong></font>";
  }
}

<div class="container">
  <input type="text" id="no1" name="no1" />
  <input type="text" id="no2" name="no2" />
  <button onclick="myFun()">Press Me</button>
</div>

<center>
  <font color="blue" size="45px" id="message"></font>
</center>

showdev · Answer 1 · 2018-03-21T17:20:56.167

Input values are strings, which are concatenated by the + sign.
In order to add them together, use parseInt() to convert to an integer.

I've also included a way to handle non-numeric values:

c = (parseInt(a.value)||0) + (parseInt(b.value)||0);

Also, the <font> and <center> tags are obsolete.
I suggest using CSS instead.

Example below:

var c;
var a = document.getElementById("no1");
var b = document.getElementById("no2");
var number = document.getElementById("number");
var m = document.getElementById("message");

a.onfocus = function() {
  m.style.display = "block";
}

a.onblur = function() {
  m.style.display = "none";
}

a.onkeyup = function() {
  var c;
  if (isNaN(a.value) == false) {
    c = (parseInt(a.value) || 0) + (parseInt(b.value) || 0);
    m.innerHTML = c;
  } else {
    m.innerHTML = "Must contain number only";
  }
}
b.onfocus = function() {
  m.style.display = "block";
}
b.onblur = function() {
  m.style.display = "none";
}
b.onkeyup = function() {

  if (isNaN(b.value) == false) {
    c = (parseInt(a.value) || 0) + (parseInt(b.value) || 0);
    m.innerHTML = c;
  } else {
    m.innerHTML = "Must contain number only";
  }
}

#message {
  color: blue;
  font-size: 45px;
  text-align: center;
}

<div class="container">
  <input type="text" id="no1" name="no1">
  <input type="text" id="no2" name="no2">
</div>

<div id="message"></div>

This only needs a small improvement that guards against instances where the other input is blank. Currently it returns NaN if you're typing in a and b is blank because you're trying to parse an empty string to an integer. — dukedevil294, Mar 21 '18 at 17:17

yajiv · Answer 2 · 2018-03-21T17:34:56.750

The problem in your code is that when you are doing a.value + b.value it is actually not doing sum but is concating two string as a.value is string not number. so you have to convert string to number(by using parseInt or parseFloat). You can remove redundant code by doing following things.

var c;
var a = document.getElementById("no1");
var b = document.getElementById("no2");
var m = document.getElementById("message");

var x=document.querySelectorAll("input");
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener('focus', function() {
        m.style.display = "block";
    });
    x[i].addEventListener('keyup', function() {
        var c;
        if (isNaN(a.value) == false) {
          c = parseInt(a.value || 0) + parseInt(b.value || 0);
          m.innerHTML = c;
        } else {

          m.innerHTML = "<font color='red' size='45px'><strong>Must containe                    number only</strong></font>";
        }
    });
    x[i].addEventListener('blur', function() {
        m.style.display = "none";
    });
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>


  <div class="container">

    <input type="text" id="no1" name="no1" />
    <input type="text" id="no2" name="no2" />
    <button onclick="myFun()">Press Me</button>

  </div>
  <center>
    <font color="blue" size="45px" id="message"></font>
  </center>
</body>

</html>

Redundant code wasn't the question. What was the problem and what did you do to solve it? — showdev, Mar 21 '18 at 17:29
I agree but if there is better solution then why not use it. — yajiv, Mar 21 '18 at 17:30
I agree, you made the code more efficient. But your code also solves the OP's issue and it would improve your answer to explain how you did that. — showdev, Mar 21 '18 at 17:30
I agree, and applied changes @showdev thanks for pointing out that. — yajiv, Mar 21 '18 at 17:35

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

Form controls like <input> store value as a string. Use the .valueAsNumber property so you don't need to convert any string values to numbers afterwards with parseInt(), parseFloat(), Number(), etc.

~~inputObj1.value + inputObj2.value~~

inputObj1.valueAsNumber + inputObj2.valueAsNumber

The following demo has 2 examples. The first example uses HTMLFormControlsCollection API and .addEventListener(). The second example uses an onevent attribute event handler.

Both examples need to use a <form> tag. and I replaced the <center> and <font> tags (they are HTML4 not HTML5) with an <output> tag. I also changed the <input> type to number.

Both examples register the input event to the <form> tag. Within the eventListener there's a condition that will only process user input from <input type='number'> tags. The onevent attribute handler on the second example only needs a function expression. The input event will fire as soon as the user enters text.

Demo

var container1 = document.forms.container1;

var con1 = container1.elements;

container1.addEventListener('input', function(e) {
  if (e.target.type === 'number') {
    con1.message1.value = con1.no1.valueAsNumber + con1.no2.valueAsNumber;
  }
}, false);

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>


  <form id="container1">

    <input type="number" id="no1" name="no1">
    <input type="number" id="no2" name="no2">



    <output id="message1" style='color:blue; font-size:45px; text-align:center; display:block;'></output>

  </form>



  <form id="container2" oninput='message2.value = no3.valueAsNumber + no4.valueAsNumber'>

    <input type="number" id="no3" name="no3">
    <input type="number" id="no4" name="no4">



    <output id="message2" style='color:blue; font-size:45px; text-align:center; display:block;'></output>

  </form>


</body>

</html>

score 0 · Accepted Answer · answered Mar 21 '18 at 19:20

var c; 
var a = document.getElementById("no1"); 
var b = document.getElementById("no2"); 
var number = document.getElementById("number"); 
var m = document.getElementById("message"); 
a.onfocus = function() { 
m.style.display = "block"; } 
a.onblur = function() { 
m.style.display = "none"; } 
a.onkeyup = function() { 
var c;
if (isNaN(a.value) == false) { 
c = Number(a.value) + Number(b.value); 
m.innerHTML = c; 
}
else { 
m.innerHTML = "<font color='red' size='45px'><strong>Must containe number only</strong></font>";
}
}
b.onfocus = function() { 
m.style.display = "block"; } 
b.onblur = function() { 
m.style.display = "none"; } 
b.onkeyup = function() { 

if (isNaN(b.value) == false) { 
c = Number(a.value) + Number(b.value); 
m.innerHTML = c;
} 
else { 
m.innerHTML = "<font color='red' size='45px'><strong>Must containe number only</strong></font>"; 
}
}

I want to show addition of two number without using any button

4 Answers4

Demo