javascript (+) sign concatenates instead of giving sum?

Question

I created a simple program that make the sum of two numbers BUT.. the program is concatenating instead, This is so confusing! Can anyone help?

function calculate() {
  var numberOne = document.querySelector(".first").value;
  var numberTwo = document.querySelector(".second").value;
  var sum = numberOne + numberTwo;
  document.querySelector(".result").innerHTML = "The sum of the two numbers is : " + sum;
}

<!doctype html>
<html>

<body>
  <p>Calculate sum of two numbers !</p>
  Enter 1rst Number:<br>
  <input type="number" class="first" placeholder=""><br><br> Enter 2nd Number:<br>
  <input type="number" class="second" placeholder=""><br><br>
  <input type="button" onclick="calculate()" value="calculate">
  <p class="result"></p>
</body>

</html>

look at this answer +num1 + +num2; -> https://stackoverflow.com/a/8976659/5323912 — N1gthm4r3, Aug 23 '17 at 13:02

score 17 · Accepted Answer · edited Jul 15 '19 at 15:01

17

Here value gives you a string, hence the concatenation. Try parsing it as an Number instead:

var sum = parseInt(numberOne) + parseInt(numberTwo);

See the demo fiddle.

edited Jul 15 '19 at 15:01

cнŝdk

31,391
7
56
78

answered Aug 23 '17 at 13:01

Suresh Atta

120,458
37
198
307

score 3 · Answer 2 · answered Aug 23 '17 at 14:16

Javascript takes dom elements as string only by default. To make mathematical calculation, you need to typecast it to integer/float or convert to number.

parseInt(number) = number, truncates after decimal value
parseFloat(number) = number with decimal values
Number(number) = number with or without decimal

score 2 · Answer 3 · answered Aug 23 '17 at 13:01

Your numberOne and numberTwo are strings, so you get concatenated strings when use + sign with two string. Parse first to numbers then sum them. You can use parseInt() and parseFloat() functions for it.

var numberOne = '7';
var numberTwo = '8';

var sum = numberOne + numberTwo;
console.log(sum);

sum = parseFloat(numberOne) + parseFloat(numberTwo);
console.log(sum);

score 1 · Answer 4 · answered Aug 23 '17 at 13:02

Use parseInt() for this, Check snippet below

function calculate() {
    var numberOne = document.querySelector(".first").value;
    var numberTwo = document.querySelector(".second").value;
    var sum = parseInt(numberOne) + parseInt(numberTwo);
    document.querySelector(".result").innerHTML = "The sum of the two numbers is : " + sum;
  }

 <p>Calculate sum of two numbers !</p>
  Enter 1rst Number:<br>
  <input type="number" class="first" placeholder=""><br><br>
  Enter 2nd Number:<br>
  <input type="number" class="second" placeholder=""><br><br>
  <input type="button" onclick="calculate()" value="calculate">
  <p class="result"></p>

score 1 · Answer 5 · edited Oct 31 '20 at 12:48

1

Example , you can use this:

var numberOne:number = +document.querySelector(".first").value;
var numberTwo:number = +document.querySelector(".second").value;
var sum = numberOne + numberTwo;

You should use + Angular typeScript

edited Oct 31 '20 at 12:48

Mohnish

1,010
1
12
20

answered Oct 31 '20 at 06:14

Jose Antonio Gandara Martinez

11
1

Worked for me. parseInt did not. But then I was fixing a concatenation issue regarding my image slide indexes in an image modal/slider. – Maria Campbell May 01 '21 at 09:57

score 0 · Answer 6 · answered Aug 23 '17 at 13:07

0

It's just because value returns with string. So sum operation ends with concatenation. you need to convert both those values.

user below code

 var sum = parseFloat(numberOne) + parseFloat(numberTwo);

answered Aug 23 '17 at 13:07

Mr. Go

567
1
5
20

score 0 · Answer 7 · edited Jul 11 '20 at 01:38

0

Who are using javascript in salesforce make sure

var a= 8 ;
var b =8 ;
var c = a+b;

This will give u result output = 88; It is will just concatenate. If you want to add those two: You should write logic as :

var a = 8;
var b = 8
var c = parseInt(a)+ parseInt(b);

This will give you the desired result of 16 , The same is the case with multiplication.

Hope this helps.

edited Jul 11 '20 at 01:38

jizhihaoSAMA

12,336
9
27
49

answered Jul 10 '20 at 23:42

Santosh Kumar

1

javascript (+) sign concatenates instead of giving sum?

7 Answers7

Linked

Related