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](https://stackoverflow.com/questions/14656003/javascript-concatenating-numbers-not-adding-up)
and:
[How to add two strings as if they were numbers?](https://stackoverflow.com/questions/8976627/how-to-add-two-strings-as-if-they-were-numbers)
and:
[innerHTML return NaN with text](https://stackoverflow.com/questions/30271865/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!