Adding two numbers concatenates them instead of calculating the sum

Question

I am adding two numbers  but I don t get a correct value   For example  doing 1   2 returns 12 and not 3  What am I doing wrong in this code    x000D   x000D  function myFunction     x000D    var y   document getElementById  txt1   value  x000D    var z   document getElementById  txt2   value  x000D    var x   y   z  x000D    document getElementById  demo   innerHTML   x  x000D    x000D   lt p gt  x000D    Click the button to calculate x  x000D     lt button onclick  myFunction    gt Try it lt  button gt  x000D   lt  p gt  x000D   lt p gt  x000D    Enter first number  x000D     lt input type  text  id  txt1  name  text1  value  1  gt  x000D    Enter second number  x000D     lt input type  text  id  txt2  name  text2  value  2  gt  x000D   lt  p gt  x000D   lt p id  demo  gt  lt  p gt  x000D   x000D   x000D

User · Answer

An alternative solution  just sharing       var result eval num1  eval num2

User · Answer

lt input type  text  name  num1  id  num1  onkeyup  sum    gt     lt input type  text  name  num2  id  num2  onkeyup  sum    gt     lt input type  text  name  num2  id  result  gt      lt script gt       function sum                   var number1   document getElementById  num1   value          var number2   document getElementById  num2   value           if  number1                     number1   0            var num3   parseInt number1    parseInt number2              document getElementById  result   value   num3                    else if number2                             number2   0             var num3   parseInt number1    parseInt number2              document getElementById  result   value   num3                    else                      var num3   parseInt number1    parseInt number2              document getElementById  result   value   num3                       lt  script gt

User · Answer

If we have two input fields then get the values from input fields  and then add them using JavaScript      input name  yourname     keyup function event           Act on the event        var value1     this  val        var value2      input name  secondName     val        var roundofa    value2   value1          input name  total     val addition

User · Answer

Try this    lt  DOCTYPE html gt   lt html gt        lt body gt           lt p gt Add Section lt  p gt            lt label gt First Number  lt  label gt           lt input id  txt1   type  text   gt  lt br   gt           lt label gt Second Number  lt  label gt           lt input id  txt2   type  text   gt  lt br   gt            lt input type  button  name  Add  value  Add  onclick  addTwoNumber     gt           lt p id  demo  gt  lt  p gt            lt script gt              function myFunction                     document getElementById  demo   innerHTML   Date                               function addTwoNumber                    var a   document getElementById  txt1   value                  var b   document getElementById  txt2   value                   var x   Number a    Number b                   document getElementById  demo   innerHTML    Add Value      x                         lt  script gt       lt  body gt   lt  html gt

User · Answer

They are actually strings  not numbers  The easiest way to produce a number from a string is to prepend it with     var x    y    z

User · Answer

Perhaps you could use this function to add numbers  function calculate a  b      return a   b   console log calculate 5  6

User · Answer

This code sums both the variables  Put it into your function  var y   parseInt document getElementById  txt1   value   var z   parseInt document getElementById  txt2   value   var x    y  z   document getElementById  demo   innerHTML   x

User · Answer

This can also be achieved with a more native HTML solution by using the output element   lt form oninput  quot result value parseInt a valueAsNumber  parseInt b valueAsNumber  quot  gt     lt input type  quot number quot  id  quot a quot  name  quot a quot  value  quot 10 quot    gt       lt input type  quot number quot  id  quot b quot  name  quot b quot  value  quot 50 quot    gt       lt output name  quot result quot  for  quot a b quot  gt 60 lt  output gt   lt  form gt   https   jsfiddle net gxu1rtqL  The output element can serve as a container element for a calculation or output of a user s action  You can also change the HTML type from number to range and keep the same code and functionality with a different UI element  as shown below   lt form oninput  quot result value parseInt a valueAsNumber  parseInt b valueAsNumber  quot  gt     lt input type  quot range quot  id  quot a quot  name  quot a quot  value  quot 10 quot    gt       lt input type  quot number quot  id  quot b quot  name  quot b quot  value  quot 50 quot    gt       lt output name  quot result quot  for  quot a b quot  gt 60 lt  output gt   lt  form gt   https   jsfiddle net gxu1rtqL 2

User · Answer

You can do a precheck with regular expression wheather they are numbers as like   function myFunction         var y   document getElementById  txt1   value      var z   document getElementById  txt2   value      if  x search    0-9  g     -1  amp  amp  y search    0-9  g     -1         var x   Number y   Number z       else       alert  invalid values            document getElementById  demo   innerHTML   x

User · Answer

Use parseInt      but make sure you specify a radix value  otherwise you will run into several bugs  if the string begins with  0   the radix is octal 8 etc     var x   parseInt stringValueX  10   var y   parseInt stringValueY  10    alert x   y     Hope this helps

User · Answer

You can also write   var z   x - -y   And you get correct answer    lt body gt    lt input type  text  id  number1  name    gt   lt input type  text  id  number2  name    gt   lt button type  button  onclick  myFunction    gt Submit lt  button gt    lt p id  demo  gt  lt  p gt        lt script gt      function myFunction             var x  y            x   document getElementById  number1   value          y   document getElementById  number2   value           var z   x - -y            document getElementById  demo   innerHTML   z             lt  script gt   lt  body gt

User · Answer

You need to use javaScript s parseInt   method to turn the strings back into numbers  Right now they are strings so adding two strings concatenates them  which is why you re getting  12

User · Answer

You are missing the type conversion during the addition step    var x   y   z  should be var x   parseInt y    parseInt z      lt  DOCTYPE html gt     lt html gt    lt body gt     lt p gt Click the button to calculate x  lt  p gt     lt button onclick  myFunction    gt Try it lt  button gt     lt br  gt     lt br  gt Enter first number     lt input type  text  id  txt1  name  text1  gt Enter second number     lt input type  text  id  txt2  name  text2  gt     lt p id  demo  gt  lt  p gt    lt script gt      function myFunction                var y   document getElementById  txt1   value        var z   document getElementById  txt2   value        var x   parseInt y    parseInt z         document getElementById  demo   innerHTML   x          lt  script gt    lt  body gt    lt  html gt

User · Answer

Here goes your code by parsing the variables in the function    lt html gt     lt body gt       lt p gt Click the button to calculate x  lt  p gt       lt button onclick  myFunction    gt Try it lt  button gt       lt br  gt       lt br  gt Enter first number       lt input type  text  id  txt1  name  text1  gt       lt br gt Enter second number       lt input type  text  id  txt2  name  text2  gt       lt p id  demo  gt  lt  p gt       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  demo   innerHTML   x               lt  script gt     lt  body gt   lt  html gt    Answer

User · Answer

This won t sum up the number  instead it will concatenate it   var x   y   z    You need to do   var x    y   z     You must use parseInt in order to specify the operation on numbers  Example   var x   parseInt y    parseInt z    final soulution  as everything us

User · Answer

Just add a simple type casting method as the input is taken in text  Use the following       var y   parseInt document getElementById  txt1   value       var z   parseInt document getElementById  txt2   value       var x   y   z

User · Answer

It s very simple    lt html gt        lt body gt           lt p gt Click the button to calculate x  lt  p gt           lt button onclick  myFunction    gt Try it lt  button gt           lt br  gt           lt br  gt Enter first number           lt input type  text  id  txt1  name  text1  gt Enter second number           lt input type  text  id  txt2  name  text2  gt           lt p id  demo  gt  lt  p gt            lt script gt              function myFunction                     var y   document getElementById  txt1   value                  var z   document getElementById  txt2   value                  var x    y    z                  document getElementById  demo   innerHTML   x                         lt  script gt       lt  body gt   lt  html gt

User · Answer

lt head gt           lt script type  text javascript  gt              function addition                                 var a   parseInt form input1 value                   var b   parseInt form input2 value                   var c   a b                 document write c                          lt  script gt       lt  head gt        lt body gt           lt form name  form  method  GET  gt           lt input type  text  name  input1  value 20 gt  lt br gt           lt input type  text  name  input2  value 10 gt  lt br gt           lt input type  button  value  ADD  onclick  addition    gt           lt  form gt       lt  body gt   lt  html gt

User · Answer

Simple  var result   parseInt  1     parseInt  2    console log result       Outputs 3

User · Answer

I just use Number       var i 2    var j 3    var k   Number i    Number j      5

User · Answer

The following may be useful in general terms    First  HTML form fields are limited to text  That applies especially to text boxes  even if you have taken pains to ensure that the value looks like a number  Second  JavaScript  for better or worse  has overloaded the   operator with two meanings  it adds numbers  and it concatenates strings  It has a preference for concatenation  so even an expression like 3  4  will be treated as concatenation  Third  JavaScript will attempt to change types dynamically if it can  and if it needs to  For example  2   3  will change both types to numbers  since you can   t multiply strings  If one of them is incompatible  you will get NaN  Not a Number    Your problem occurs because the data coming from the form is regarded as a string  and the   will therefore concatenate rather than add   When reading supposedly numeric data from a form  you should always push it through parseInt   or parseFloat    depending on whether you want an integer or a decimal   Note that neither function truly converts a string to a number  Instead  it will parse the string from left to right until it gets to an invalid numeric character or to the end and convert what has been accepted  In the case of parseFloat  that includes one decimal point  but not two   Anything after the valid number is simply ignored  They fail if the string doesn   t even start off as a number  Then you will get NaN   A good general purpose technique for numbers from forms is something like this   var data parseInt form elements  data   value       or parseFloat   If you   re prepared to coalesce an invalid string to 0  you can use   var data parseInt form elements  data   value     0

User · Answer

If Nothing works then only try this  This maybe isn t Right way of doing it but it worked for me when all the above failed   var1 -  - var2

User · Answer

Use parseFloat it will convert string to number including decimal values    function myFunction           var y   document getElementById  txt1   value        var z   document getElementById  txt2   value        var x   parseFloat y    parseFloat z         document getElementById  demo   innerHTML   x             lt p gt    Click the button to calculate x     lt button onclick  myFunction    gt Try it lt  button gt   lt  p gt   lt p gt    Enter first number     lt input type  text  id  txt1  name  text1  value  1  gt    Enter second number     lt input type  text  id  txt2  name  text2  value  2  gt   lt  p gt   lt p id  demo  gt  lt  p gt

User · Answer

Or you could simply initialize var x   0    you should use let x   0   This way it will add not concatenate

[javascript] Adding two numbers concatenates them instead of calculating the sum

Examples related to javascript

Examples related to html