When Javascript interprets numeric input as string, what should I do?

Question

On several pages I created, it's requested from the user a numerical input. The problem is the Javascript may interpret this input as a string rather than a number. For instance,

var x = document.getElementById("inputx").value;
var y = document.getElementById("inputy").value;
var z = x+y;
document.getElementById("outputParagraph").innerHTML = z;

So, if the user inputted 2 and 3, I would expect the output 5, but it may return 23. It doesn't always happen, but I couldn't notice any pattern.

Usually, I work around this problem doing some innocuous mathematical operations, like multiplying by 1, or doing a varible++ followed by a variable--. It always work. Sometimes I create a whole function to perform this workaround, since it's required in several parts of the code, like on this time calculator page I coded:

//define time class

class time {
 constructor(day, hour, minute,
  second) {
  this.day = day;
  this.hour = hour;
  this.minute = minute;
  this.second = second;
 }
}

// this work around forces Javascript to understand inputs as numbers

function workaround(t) {

 console.log("working around...");

 console.log(typeof t.day);
 t.day = t.day * 1;
 console.log(typeof t.day);
 t.hour = t.hour * 1;
 t.minute = t.minute * 1;
 t.second = t.second * 1;
}

My question is: is there a more simple, elegant way to solve this issue?

Duplicate of [Input value is a string instead of a number](https://stackoverflow.com/q/27849944/4642212). Use `` and their `valueAsNumber` property or simply [convert the text to numbers](https://stackoverflow.com/q/4841373/4642212). — Sebastian Simon, Jul 26 '20 at 00:09

score 2 · Answer 1 · answered Jul 25 '20 at 23:57

2

To cast to number the string coming from DOM you can use +:

var x = +document.getElementById("inputx").value;
var y = +document.getElementById("inputy").value;
var z = x+y;
document.getElementById("outputParagraph").innerHTML = z;

answered Jul 25 '20 at 23:57

8HoLoN

1,122
5
14

This is the correct answer. Using `parseInt` as the other answer suggested is overkill. – GirkovArpa Jul 26 '20 at 00:01

score 0 · Answer 2 · answered Jul 25 '20 at 23:59

0

You can parse the string as int. Her is a link to the MDN documentation:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

var x = parseInt(document.getElementById("inputx").value);

answered Jul 25 '20 at 23:59

Antoine Bernier

94
5

score -1 · Answer 3 · answered Jul 26 '20 at 00:03

-1

use the eval function ,,this function turn string numbers into numbers and calculate the result

    z=eval(x+y)

answered Jul 26 '20 at 00:03

shady ahemd

3
3

Are you actually recommending simply `eval`ing user input directly? For something as simple as converting to number? – Sebastian Simon Jul 26 '20 at 00:08
sorry i dont understand what you actually want to do ?eval is way to go if you want simply add two strings of type numbers ! and if the input wasnt numper it wil concat it – shady ahemd Jul 26 '20 at 00:17
[`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) converts things to numbers. [`eval`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) executes arbitrary JavaScript code. – Sebastian Simon Jul 26 '20 at 00:21
as long as user input numbers eval and number will work @user4642212 – shady ahemd Jul 26 '20 at 00:30
Not only is this advice absolutely to be avoided, it doesn’t even work. `x+y` still performs string concatenation; eval’ing that won’t magically do addition retroactively. – Sebastian Simon Jul 26 '20 at 00:32
try this : z=x+"+"+y,,, let or var z1=eval(z) @user4642212 – shady ahemd Jul 26 '20 at 00:44

When Javascript interprets numeric input as string, what should I do?

3 Answers3