Adding Variable Integers But Outputting as Strings - JavaScript

Question

I'm having a small issue adding variables together, I have a input number field set up to set the variable. Then all I'm then trying to do is post 3 numbers the first is the original, the second is the first plus the original, then the third is the second plus the original. But for some reason (clearly I'm missing something) as my variables are outputting as strings rather than integers?

function submit() {
  var input = document.getElementById("input").value;
  var p1 = parseInt(input);
  var p2 = parseInt(p1) + input;
  var p3 = parseInt(p2) + input;
  document.getElementById("p1").innerHTML = p1;
  document.getElementById("p2").innerHTML = p2;
  document.getElementById("p3").innerHTML = p3;
}

<label for="input">Value</label><br>
<input type="number" id="input"><br>
<button id="btnSubmit" onclick="submit()">Submit</button>
<p id="p1">0</p>
<p id="p2">0</p>
<p id="p3">0</p>

Javascript + doesn't decide the mode of operation depending only on the first operand but on both: "If Type(lprim) is String or Type(rprim) is String, then". If either is a string, you are getting a string. — ASDFGerte
– ASDFGerte, Commented Jun 1, 2018 at 13:06

Nandita Sharma · Accepted Answer · 2018-06-01 13:00:26Z

1

document.getElementById("input").value returns a string value, you need to convert it to integer type. Use parseInt on input variable declaration instead doing it everywhere else.

  var input = parseInt(document.getElementById("input").value);

function submit() {
  var input = parseInt(document.getElementById("input").value, 10);
  var p1 = input;
  var p2 = p1 + input;
  var p3 = p2 + input;
  document.getElementById("p1").innerHTML = p1;
  document.getElementById("p2").innerHTML = p2;
  document.getElementById("p3").innerHTML = p3;
}

<label for="input">Value</label><br>
<input type="number" id="input"><br>
<button id="btnSubmit" onclick="submit()">Submit</button>
<p id="p1">0</p>
<p id="p2">0</p>
<p id="p3">0</p>

edited Jun 1, 2018 at 13:00

answered Jun 1, 2018 at 12:57

Nandita Sharma

13.4k2 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tim Biegeleisen Over a year ago

Note that your explanation, while good coding advice, does not actually touch on what is going wrong with the OP's logic.

Nandita Sharma Over a year ago

I was in the middle of updating the answer only. Thanks :)

Tim Biegeleisen · Accepted Answer · 2018-06-01 12:57:04Z

0

Make sure you do your arithmetic with numbers everywhere, consistently:

function submit() {
    var input = document.getElementById("input").value;
    var p1 = parseInt(input);
    var p2 = 2*p1;
    var p3 = p2 + p1;
    document.getElementById("p1").innerHTML = p1;
    document.getElementById("p2").innerHTML = p2;
    document.getElementById("p3").innerHTML = p3;
}

<label for="input">Value</label><br>
<input type="number" id="input"><br>
<button id="btnSubmit" onclick="submit()">Submit</button>
<p id="p1">0</p>
<p id="p2">0</p>
<p id="p3">0</p>

This is just an issue with JavaScript interpreting the expression as string concatenation versus arithmetic, the latter which is what you are trying to achieve.

answered Jun 1, 2018 at 12:57

Tim Biegeleisen

526k32 gold badges323 silver badges399 bronze badges

Comments

Fueled By Coffee · Accepted Answer · 2018-06-01 13:00:06Z

0

You're doing string concatenation. use parseInt() to get the integer representation for your input

    function submit() {
      var input = document.getElementById("input").value;
      var p1 = parseInt(input);
      var p2 = parseInt(p1) + parseInt(input);
      var p3 = parseInt(p2) + parseInt(input);
      document.getElementById("p1").innerHTML = p1;
      document.getElementById("p2").innerHTML = p2;
      document.getElementById("p3").innerHTML = p3;
    }

	<label for="input">Value</label><br>
    <input type="number" id="input"><br>
    <button id="btnSubmit" onclick="submit()">Submit</button>
    <p id="p1">0</p>
    <p id="p2">0</p>
    <p id="p3">0</p>

edited Jun 1, 2018 at 13:00

answered Jun 1, 2018 at 12:57

Fueled By Coffee

2,5797 gold badges33 silver badges45 bronze badges

1 Comment

user47589 Over a year ago

There's no point in calling parseInt on a number. p1 is a number, not a string.

Ahmed Bajra · Accepted Answer · 2018-06-01 13:03:02Z

0

input is a string, which is why you're using parseInt(input) to cast it to an integer.

The line var p2 = parseInt(p1) + input; does for an input of, let's say, "42" as follows: var p2 = parseInt(parseInt("42")) + "42";, which means you concatenate a string instead of adding two integers.

You can either use var p2 = p1 + parseInt(input); or just var p2 = p1 * 2; and var p3 = p1 * 3, which is probably a simpler solution.

answered Jun 1, 2018 at 13:03

Ahmed Bajra

4011 gold badge3 silver badges14 bronze badges

Comments

Ravi Mariya · Accepted Answer · 2018-06-01 13:04:53Z

in javascript '1' + 1 = 11 so what are you doing is

p1 = parseInt(1) //input = 1

p2 = 1 + '1' // p1 = 1, input = '1' 
output = '11'

p3 = 1 + '11' // p2 = 1, input = '1'
output = '111'

you should parse your input instead of p1

here is updated snippet

function submit() {
  var input = parseInt(document.getElementById("input").value);
  var p1 = input;
  var p2 = p1 + input;
  var p3 = p2 + input;
  document.getElementById("p1").innerHTML = p1;
  document.getElementById("p2").innerHTML = p2;
  document.getElementById("p3").innerHTML = p3;
}

<label for="input">Value</label><br>
<input type="number" id="input"><br>
<button id="btnSubmit" onclick="submit()">Submit</button>
<p id="p1">0</p>
<p id="p2">0</p>
<p id="p3">0</p>

Collectives™ on Stack Overflow

Adding Variable Integers But Outputting as Strings - JavaScript

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related