Adding integers in JavaScript in the form of Variable

Question

function abc() 
{
  var para = document.getElementById("paragraph");
  var inpu = document.getElementById("input").value;
  var inpu_small = inpu - 10;
  var inpu_big = inpu + 10;
   
  para.innerHTML = inpu + " comes between " + inpu_small + " and " + inpu_big + ".";
}

#para{
  font-size: 38px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="number" id="input">
  <button id="submit" onclick="abc()"> Submit</button>
  <p id="paragraph">here</p> 
</body>
</html>

Instead of Summing, It is being added after the input. I want it to ad in the input and show the result, please help me figure out this problem.

Add `+` before the value and it would work. `var inpu = +document.getElementById("input").value;` — DecPK, Jun 12 '21 at 06:56

score 2 · Answer 1 · edited Jun 12 '21 at 07:00

When you access the input value here:

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

In this case, the type of inpu is a string. JS behaves weird when you try to do binary operations such as addition and subtraction when one input is a string and the other is an integer (i.e. while subtracting it treats the string as an int but while adding it will treat the int as a string)

You might want to do something like parseInt(inpu) to first convert the string to an integer with which you can perform those calculations.

function abc() {
  var para = document.getElementById("paragraph");
  var inpu = parseInt( document.getElementById("input").value );
  //or
  //var inpu = +document.getElementById("input").value;
  var inpu_small = inpu - 10;
  var inpu_big = inpu + 10;

  para.innerHTML = inpu + " comes between " + inpu_small + " and " + inpu_big + ".";
}

#para {
  font-size: 38px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

<input type="number" id="input">
<button id="submit" onclick="abc()"> Submit</button>
<p id="paragraph">here</p>

It would be more clear to OP if you code that returns the output as OP intended. It helps OP to understand in a practical way... — DecPK, Jun 12 '21 at 07:01

score 1 · Answer 2 · answered Jun 12 '21 at 07:03

It will works fine try

function abc() 
{
  var para = document.getElementById("paragraph");
  var inpu = document.getElementById("input").value;
  var inpu_small = inpu - 10;
  var inpu_big = Number(inpu) + 10;
   
  para.innerHTML = inpu + " comes between " + inpu_small + " and " + inpu_big + ".";
}

#para{
  font-size: 38px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

<input type="number" id="input">
  <button id="submit" onclick="abc()"> Submit</button>
  <p id="paragraph">here</p>

score 0 · Answer 3 · answered Jun 12 '21 at 07:34

Well, this is because the input value will always be in the form of a string and you have to typecast it in the numeric form.

Now there are two ways you can achieve this:

parseInt()
+ before the value

Example with parseInt:

function abc() {
  var para = document.getElementById("paragraph");
  var inpu = document.getElementById("input").value;
  var inpu_small = parseInt(inpu) - 10;
  var inpu_big = parseInt(inpu) + 10;

  para.innerHTML = inpu + " comes between " + inpu_small + " and " + inpu_big + ".";
}

#para {
  font-size: 38px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

<input type="number" id="input">
<button id="submit" onclick="abc()"> Submit</button>
<p id="paragraph">here</p>

Example with + symbol:

function abc() {
  var para = document.getElementById("paragraph");
  var inpu = document.getElementById("input").value;
  var inpu_small = +inpu - 10;
  var inpu_big = +inpu + 10;

  para.innerHTML = inpu + " comes between " + inpu_small + " and " + inpu_big + ".";
}

#para {
  font-size: 38px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

<input type="number" id="input">
<button id="submit" onclick="abc()"> Submit</button>
<p id="paragraph">here</p>

@YashDhankhar read out https://stackoverflow.com/questions/35791767/html-input-type-number-still-returning-a-string-when-accessed-from-javascript — Ahmad Habib, Jun 14 '21 at 06:54

Adding integers in JavaScript in the form of Variable

3 Answers3