javascript concatenates numbers ONLY when I add a second getElementbyId

Question

Please don't mark this as duplicate. It's similar to the following , but not the same.

I have looked at:

Javascript concatenating numbers, not adding up and: How to add two strings as if they were numbers? and: innerHTML return NaN with text

Here is my code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>


<form action="PayslipServlet" method="get">
          First Number:    <input type="text" name="n1" id="n1"><br/>
          Second Number:   <input type="text" name="n2" id="n2"><br/>
          Sum: <span id="Sum"></span>
          <br>
          <input type="button" value="Submit" onClick="pr()">
        </form>

        <script>
          function pr() {
            var foobar = 100;
            <!-- works -->
            <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value  ; works -->
            <!-- works -->
            <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n2').value  ; works -->
            <!-- works -->
            <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +foobar  ; -->
            <!-- concatenates as strings: why? -->
            document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +document.getElementById('n2').value  ;
          }
        </script>



</head>

The problem statement:

When I feed n1 back to sum, works (please see the commented lines) When I feed n2 back to sum, works When I feed n1+foobar to sum, works

BUT, when I feed n1+n2 back to sum, I get a concatenated string (e.g. 1+2 becomes 12, not 3).

What am I doing wrong?

Thanks!

Putting `+` before a string turns it into a number. So `+string1 +string2` turns `string1` into a number, but `string2` is still a string because the second `+` is the binary operator, not the unary prefix. — Barmar, Apr 09 '20 at 22:04
You need another `+` `+document.getElementById('n1').value + +document.getElementById('n2').value` — Anurag Srivastava, Apr 09 '20 at 22:05

score 1 · Accepted Answer · answered Apr 09 '20 at 22:05

1

You need to convert both values to numbers before adding them, so you'll get addition rather than concatenation.

document.getElementById("Sum").innerHTML = +document.getElementById('n1').value + +document.getElementById('n2').value  ;

answered Apr 09 '20 at 22:05

Barmar

741,623
53
500
612

Maybe parseFloat() or parseInt() should be used instead of a unary cast – Kevin Apr 09 '20 at 22:08
@Kevin I debated adding that as an alternative method. But there are other answers showing it. – Barmar Apr 09 '20 at 22:08

Angela · Answer 2 · 2020-04-09T22:09:59.963

1

You need to use the parseInt directive to convert the input values to int data type. Here is the code:

    <script>
      function pr() {
        var foobar = 100;
        <!-- works -->
        <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value  ; works -->
        <!-- works -->
        <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n2').value  ; works -->
        <!-- works -->
        <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +foobar  ; -->
        <!-- concatenates as strings: why? -->
        document.getElementById("Sum").innerHTML = parseInt(document.getElementById('n1').value) +parseInt(document.getElementById('n2').value)  ;
      }
    </script>

edited Apr 09 '20 at 22:09

answered Apr 09 '20 at 22:07

Angela

27
6

You don't need to put `+` before the first `parseInt()`. – Barmar Apr 09 '20 at 22:07
You are right, I just copied the code and added the parseInt() where it needed the conversions. I will edit it. – Angela Apr 09 '20 at 22:09

score 1 · Answer 3 · answered Apr 09 '20 at 22:07

You're using two different kinds of +s there. With the first two:

<!-- works -->
<!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value  ; works -->
<!-- works -->
<!-- document.getElementById("Sum").innerHTML = +document.getElementById('n2').value  ; works -->

the operation performed is leftSide = +expression

This is the unary plus operator, which coerces non-numbers to numbers.

In the third:

<!-- works -->
<!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +foobar  ; -->

the operation performed is leftSide = +expression1 + expression2

Unary plus is used on expression1 to turn it into a number. But the + between expression1 and expression2 is not unary plus, but addition/concatenation. When + is used between two expressions, if both are numeric, they get added together. Here, after unary plus on the .value, it's a number, and foobar is a number too, so they get added together.

But in

document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +document.getElementById('n2').value

Now, the right expression is a string not a number. + only adds when both sides are numbers. someNumber + someString results in concatenation.

If you want to add, make sure both sides of the + are numbers first.

javascript concatenates numbers ONLY when I add a second getElementbyId

3 Answers3