Add two numbers and display result in textbox with Javascript

Question

I was just trying to write a simple javascript program that will demonstrate to take user input from text field  and clicking the button will display the summation result of those number in another text field  But unfortunately the below code is not working  Clicking the button does not show anything in the result text field     lt body gt       lt div gt           lt div gt               lt h1 gt Add two number using text box as input using javascript lt  h1 gt           lt  div gt              Enter First Number    lt br gt               lt input type  text  id  Text1  name  TextBox1  gt               lt br gt              Enter Second Number    lt br gt               lt input type  text  id  Text2  name  TextBox2  gt               lt br gt              Result    lt br gt               lt input type  text  id  txtresult  name  TextBox3  gt               lt br gt            lt input type  button  name  clickbtn  value  Display Result  onclick  add number    gt            lt script type  text javascript  gt              function add number                var first number   parseInt document getElementsById  Text1   value               var second number   parseInt document getElementsById  Text2   value               var result   first number   second number              document getElementById  txtresult   innerHTML   result                             lt  script gt

User · Answer

lt script gt  function myFunction     var y   parseInt document getElementById  txt1   value   var z   parseInt document getElementById  txt2   value   var x   y   z  document getElementById  result   innerHTML   x     lt  script gt   lt p gt   lt label gt Enter First Number    lt  label gt  lt br gt   lt input type  number  id  txt1  name  text1  gt  lt br  gt   lt label gt Enter Second Number    lt  label gt  lt br gt   lt input type  number  id  txt2  name  text2  gt   lt  p gt   lt p gt   lt button onclick  myFunction    gt Calculate lt  button gt   lt  p gt   lt br  gt   lt p id  result  gt  lt  p gt

User · Answer

var first number   parseInt document getElementById  Text1   value   var second number   parseInt document getElementById  Text2   value       This is because your method  getElementById has the letter  s    getElement  s  ById

User · Answer

It should be document getElementById  quot txtresult quot   value  result  You are setting the value of the textbox to the result  The id  quot txtresult quot  is not an HTML element

User · Answer

x000D   x000D  var app   angular module  myApp        x000D  app controller  myCtrl   function  scope    x000D   x000D       scope minus   function          x000D   x000D       var a   Number  scope a    0   x000D              var b   Number  scope b    0   x000D               scope sum1   a-b  x000D          scope sum    scope sum1 1   x000D      alert  scope sum1   x000D        x000D   x000D      scope add   function          x000D   x000D       var c   Number  scope c    0   x000D              var d   Number  scope d    0   x000D               scope sum2   c d  x000D      alert  scope sum2   x000D        x000D      x000D   lt head gt  x000D         lt script src    https   ajax googleapis com ajax libs angularjs 1 3 3 angular min js  gt  lt  script gt  x000D      lt  head gt  x000D   lt body gt  x000D   x000D   lt div ng-app  myApp  ng-controller  myCtrl  gt  x000D        lt h3 gt Using Double Negation lt  h3 gt  x000D   x000D       lt p gt First Number  x000D           lt input type  text  ng-model  a    gt  x000D       lt  p gt  x000D       lt p gt Second Number  x000D           lt input type  text  ng-model  b    gt  x000D       lt  p gt  x000D       lt button id  minus  ng-click  minus    gt Minus lt  button gt  x000D       lt  --  lt p gt Sum     a - b    lt  p gt   -- gt  x000D    lt p gt Sum     sum1    lt  p gt  x000D   x000D       lt p gt First Number  x000D           lt input type  number  ng-model  c    gt  x000D       lt  p gt  x000D       lt p gt Second Number  x000D           lt input type  number  ng-model  d    gt  x000D       lt  p gt  x000D    lt button id  minus  ng-click  add    gt Add lt  button gt  x000D       lt p gt Sum     sum2    lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You made a simple mistake  Don t worry     Simply use getElementById instead getElementsById  true  var first number   parseInt document getElementById  Text1   value     False  var first number   parseInt document getElementsById  Text1   value     Thanks

User · Answer

lt script gt   function sum         var value1  parseInt document getElementById  txtfirst   value       var value2 parseInt document getElementById  txtsecond   value       var sum value1 value2      document getElementById  result   value sum       lt  script gt

User · Answer

Here a working fiddle  http   jsfiddle net sjh36otu           function add number                  var first number   parseInt document getElementById  Text1   value               var second number   parseInt document getElementById  Text2   value               var result   first number   second number               document getElementById  txtresult   value   result

User · Answer

When you assign your variables  first number  and  second number   you need to change  document getElementsById  to the singular  document getElementById

User · Answer

You can simply convert the given number using Number primitive type in JavaScript as shown below   var c   Number first    Number second

[javascript] Add two numbers and display result in textbox with Javascript

Examples related to javascript

Examples related to html

Examples related to function

Examples related to textbox