Add two textbox values and display the sum in a third textbox automatically

Question

I have assigned a task to add two textbox values I want the result of addition to appear in the 3rd textbox as soon as enter the values in the first two textboxes without pressing any buttons   For eg In the first textbox i want to enter 450 when i press digit 4 of number  450  then it will be added to the 3rd textbox any number i press in the first two textboxes suddenly that changes will be reflected on the third textbox How can i do this   Here i write my code call sum   in onkeyup  onkeyup  sum    function sum             var txtFirstNumberValue   document getElementById  txt1   value          var txtSecondNumberValue   document getElementById  txt2   value          var result   parseInt txtFirstNumberValue    parseInt txtSecondNumberValue           if  isNaN result                document getElementById  txt3   value   result                This is not working in chrome

User · Answer

Well  base on your code  you would put onkeyup sum   in each text box txt1 and txt2

User · Answer

In below code i have done operation of sum and subtraction  because of using JavaScript if you want to call function  then you have to put your below code outside of document ready function      and outside the script end tag   I have taken one another script tag for this operation And put below code between script starting tag     your code     script ending tag    function operation            var txtFirstNumberValue   parseInt document getElementById  basic   value      var txtSecondNumberValue  parseInt document getElementById  hra   value      var txtThirdNumberValue  parseInt document getElementById  transport   value      var txtFourthNumberValue  parseInt document getElementById  pt   value      var txtFiveNumberValue   parseInt document getElementById  pf   value       if  txtFirstNumberValue               txtFirstNumberValue   0     if  txtSecondNumberValue               txtSecondNumberValue   0     if  txtThirdNumberValue               txtThirdNumberValue   0     if  txtFourthNumberValue               txtFourthNumberValue   0     if  txtFiveNumberValue               txtFiveNumberValue   0        var result     txtFirstNumberValue   txtSecondNumberValue      txtThirdNumberValue  -  txtFourthNumberValue   txtFiveNumberValue       if   isNaN result            document getElementById  total   value   result            And put onkeyup  operation     inside all 5 textboxes in your html form   This code running in both Firefox and Chrome

User · Answer

well I think the problem solved this below code works   function sum         var result 0         var txtFirstNumberValue   document getElementById  txt1   value         var txtSecondNumberValue   document getElementById  txt2   value      if  txtFirstNumberValue       amp  amp  txtSecondNumberValue                result   parseInt txtFirstNumberValue        else if txtFirstNumberValue        amp  amp  txtSecondNumberValue                 result  parseInt txtSecondNumberValue        else if  txtSecondNumberValue        amp  amp  txtFirstNumberValue                 result   parseInt txtFirstNumberValue    parseInt txtSecondNumberValue                if   isNaN result                document getElementById  txt3   value   result

User · Answer

try this    function sum            var txtFirstNumberValue   document getElementById  txt1   value         var txtSecondNumberValue   document getElementById  txt2   value         if  txtFirstNumberValue                   txtFirstNumberValue   0         if  txtSecondNumberValue                   txtSecondNumberValue   0          var result   parseInt txtFirstNumberValue    parseInt txtSecondNumberValue          if   isNaN result                document getElementById  txt3   value   result

User · Answer

Try this  Open given fiddle in CHROME  function sum           var txtFirstNumberValue   document getElementById  txt1   value        var txtSecondNumberValue   document getElementById  txt2   value        var result   parseInt txtFirstNumberValue    parseInt txtSecondNumberValue         if   isNaN result              document getElementById  txt3   value   result              HTML   lt input type  text  id  txt1   onkeyup  sum       gt   lt input type  text  id  txt2   onkeyup  sum       gt   lt input type  text  id  txt3    gt    DEMO HERE

User · Answer

This is the correct code  function sum           var txtFirstNumberValue   document getElementById  total fees   value       var txtSecondNumberValue   document getElementById  advance payement   value       var result   parseInt txtFirstNumberValue  - parseInt txtSecondNumberValue        if txtFirstNumberValue       txtSecondNumberValue                      document getElementById  balance payement   value   0             if   isNaN result                   document getElementById  balance payement   value   result

User · Answer

Since eval  3 2   5  you can use it as following     byId  id   gt document getElementById id    byId  txt3   value eval    byId  txt1   value    byId  txt2   value      By that   you don t need  parseInt

User · Answer

i didn t find who made elegant answer   that s why let me say     Array from     document querySelectorAll   txt1  txt2     map e   gt  parseInt e value     0     to avoid NaN  reduce  a  b    gt  a b  0     x000D   x000D  window sum       gt   x000D   document getElementById  result   innerHTML      x000D     Array from  x000D       document querySelectorAll   txt1  txt2   x000D       map e  gt parseInt e value   0  x000D      reduce  a b   gt a b 0  x000D   lt input type  text  id  txt1  onkeyup  sum     gt  x000D   lt input type  text  id  txt2  onkeyup  sum     style  margin-right 10px    gt  lt span id  result  gt  lt  span gt  x000D   x000D   x000D

[javascript] Add two textbox values and display the sum in a third textbox automatically

Examples related to javascript