title: I want to show addition of two number without using any button
body: <p>I have two input boxes with id <code>no1</code> and <code>no2</code>. 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.</p>
  
  <p>How can I show my addition value In real time when user is just typing?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 = "&lt;font color='red' size='45px'&gt;&lt;strong&gt;Must containe number only&lt;/strong&gt;&lt;/font&gt;";
    }
  }
  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 = "&lt;font color='red' size='45px'&gt;&lt;strong&gt;Must containe number only&lt;/strong&gt;&lt;/font&gt;";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;input type="text" id="no1" name="no1" /&gt;
    &lt;input type="text" id="no2" name="no2" /&gt;
    &lt;button onclick="myFun()"&gt;Press Me&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;center&gt;
    &lt;font color="blue" size="45px" id="message"&gt;&lt;/font&gt;
  &lt;/center&gt;</code></pre>
  </div>
  </div>
  </p>