Sum on 2 inputs and appear in real time

Question:

My question is as follows: I have two type text inputs. One person put a number in input 1 and another number in input 2.

When the person finished filling in, the result of the sum of the 2 inputs automatically appeared in real time, without having to change the page.

If I put in the first input 5 and in the second input 10, then when I finished filling it would appear like this:

The sum of the two numbers is 15.

That is, in real time without having to click on anything or so.

Answer:

With pure javascript just get the values of the fields by the id, with document.getElementById() convert the values to int using parseInt() , the number 10 means in which base the number will be converted, add and throw the result in the input.

function calcular() {
  var n1 = parseInt(document.getElementById('n1').value, 10);
  var n2 = parseInt(document.getElementById('n2').value, 10);
  document.getElementById('resultado').innerHTML = n1 + n2;
}

<form action="" method="post">
  N1: <input type="text" id="n1" value="10" /> <br> N2: <input type="text" id="n2" value="5" onblur="calcular()" /> <br>
</form>

<div id="resultado"></div>

Post Views: 3