Photo by Sigmund on Unsplash

JavaScript Tip: How to Quickly Extract Number Inputs

Use valueAsNumber

The Pragmatic Programmers
2 min readJul 14, 2022

--

Using the value property is the most common way of getting the value of an input element. This property always returns a string, even when the input value is a number. As a result, when processing a number form field, we often have to use parseInt() or parseFloat() to convert the resulting string into a number. Consider this example:

<input type="number" value="30" id="numberinput">

let input = document.querySelector('#numberinput').value;
console.log(typeof input); // => string
input = parseFloat(input, 10);
console.log(typeof input); // => number

Not many developers know that input elements with type="number" have an additional property that we can take advantage of to cut the parseInt()/parseFloat() step: valueAsNumber.

Here’s an example:

// notice the valueAsNumber at the end of the statement
let input = document.querySelector('#numberinput').valueAsNumber;
console.log(typeof input); // => number

Here, we’ve replaced value with valueAsNumber resulting in a number type. Keep in mind that if the input is empty, valueAsNumber will return NaN, as opposed to an empty string.

The takeaway from this short post is that when you want to store user input as a number, for example when you have a form that collects years employed or number of dependents, opt for valueAsNumber rather than value.

Where else do you think valueAsNumber would come in handy? Let us know in the comments.

--

--

Faraz Kelhini
The Pragmatic Programmers

Faraz is a professional JavaScript developer who is passionate about promoting patterns and ideas that make web development more productive. Website: eloux.com