CODEWITHSUNDEEP
javascript
Matt Hutch
Matt Hutch

Reputation: 463

Adding Variable Integers But Outputting as Strings - JavaScript

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>

Upvotes: 0

Views: 206

Answers (5)

Ravi Mariya
Ravi Mariya

Reputation: 1230

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>

Upvotes: 0

Ahmed Bajra
Ahmed Bajra

Reputation: 401

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.

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13417

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>

Upvotes: 1

Fueled By Coffee
Fueled By Coffee

Reputation: 2569

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>

Upvotes: 0

Tim Biegeleisen
Tim Biegeleisen

Reputation: 522762

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.

Upvotes: 0

Related Questions