How to get the value of an input as a number with vanilla JavaScript

Today, we’re going to look at how to get the value of an input element as a number using vanilla JS.

We’ll look at the traditional way of doing that, and an awesome modern property that makes it even easier. Let’s dig in!

An example

Let’s imagine you have an input element with a type of number.

<label for="num">Pick a number</label>
<input type="number" id="num" value="0">

Whenever the user updates the value of the field, you want to get the value of the num field as a number.

let num = document.querySelector('#num');

// Handle number changes
num.addEventListener('input', function () {
	// ...
});

Let’s look at two ways you can do that.

Convert the value property string to a number

The num.value property returns a string, even when the field type is number.

We can use a number-to-string method, like parseInt() or parseFloat(), to convert the num.value into a number.

// Handle number changes
num.addEventListener('input', function () {
	
	// As a string
	let val = num.value;

	// As a number
	let valAsNumber = parseFloat(num.value);

});

Here’s a demo.

Use the valueAsNumber property

As a modern alternative, you can use the HTMLInputElement.valueAsNumber property (I just learned this trick from Steve Sewell).

As its name implies, it returns the value of an input element as a number instead of a string.

// Handle number changes
num.addEventListener('input', function () {
	
	// As a number
	let val = num.valueAsNumber;

});

This works in all modern browsers. Here’s another demo.