compute sum dynamically with javascript

Question

I have two textboxes Num1 and Num2 and another textbox Sum having the value 10.

How can I do this wherein if the user will enter a number for Num1, it will add it to Sum and dynamically change the displayed number in the Sum textbox. If the user will enter a number in Num2 it will also add that number to the updated number shown in Sum textbox and dynamically change the value for Sum textbox also.

How to do this in Javascript?

Answer 1

<input type="text" id="Num1" name="Num1"/>
<input type="text" id="Num2" name="Num2"/>
<input type="text" id="Sum" name="Sum"/>


function addNums() {
  var num1 = parseInt(document.getElementById('Num1').value,10);
  var num2 = parseInt(document.getElementById('Num2').value,10)
  document.getElementById('Sum').value = (num1 + num2).toString();
}

There are other ways to reference the form items, but this one works.

Answer 2

Something like that:

<input type="text" id="Num1" value="1" onblur="recalculateSum();"/>
<span>+</span>
<input type="text" id="Num2" value="1" onblur="recalculateSum();"/>
<span>=</span>
<input type="text" id="Sum" value=""/>
<script>

    function recalculateSum()
    {
        var num1 = parseInt(document.getElementById("Num1").value);
        var num2 = parseInt(document.getElementById("Num2").value);
        document.getElementById("Sum").value = num1 + num2;

    }

</script>