Adding integers in JavaScript in the form of Variable [duplicate]

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
– DecPK, Commented Jun 12, 2021 at 6:56

DecPK · Accepted Answer · 2021-06-12 07:00:22Z

2

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>

edited Jun 12, 2021 at 7:00

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

answered Jun 12, 2021 at 6:53

Sannat Bhasin

1611 silver badge9 bronze badges

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

2 Comments

DecPK Over a year ago

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...

Sannat Bhasin Over a year ago

@decpk Alright 👍

Akshat Jain · Accepted Answer · 2021-06-12 07:03:00Z

1

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>

answered Jun 12, 2021 at 7:03

Akshat Jain

1521 gold badge2 silver badges7 bronze badges

Comments

Ahmad Habib · Accepted Answer · 2021-06-12 07:34:11Z

0

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>

answered Jun 12, 2021 at 7:34

Ahmad Habib

2,5103 gold badges17 silver badges34 bronze badges

2 Comments

Yash Dhankhar Over a year ago

but i defined the input as number in html

Ahmad Habib Over a year ago

@YashDhankhar read out stackoverflow.com/questions/35791767/…

Collectives™ on Stack Overflow

Adding integers in JavaScript in the form of Variable [duplicate]

3 Answers 3

2 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Linked

Related