How to get number value from input in JavaScript

Published: · Reading time: 2 min

Working with HTML inputs may require handling proper value types, like numbers. However, the value property of an input element will return a string-type value by default.

Default value

Given the input with a type of number let’s get the value in the number type.

<input type="number" value="42">

By default, the value property of the input element will always return a string type, even if the input type is a number.

const numberInput = document.querySelector("input[type=number]”)

numberInput.value // "42"

💡 NOTE: the type attribute of input element can have many different values, but its value property will always return a string-type value.

Number value

To get the number type value from input element you can use one of two approaches.

The first one is to convert the string value to a number value with either the parseInt or parseFloat method (depending on your needs).

const numberInput = document.querySelector("input[type=number]”)

parseInt(numberInput.value) // 42

This approach is useful when working with input types like text or search, as the user may input a numeric value, and you may want to capture that.

If the input value is not a number the parseInt or parseFloat will return a NaN value.

parseInt and parseFloat methods works in all browsers.

The second approach is to use the valueAsNumber property instead of the value property on an input element.

const numberInput = document.querySelector("input[type=number]”)

numberInput.valueAsNumber // 42

The valueAsNumber property will always work on input types like: number, range, date, month, time, and week. But if you use this property say on a text type input it will return a NaN value.

This is a more straightforward approach especially if you know the input type you’re working with. valueAsNumber property is supported in all browsers as well.

Like this article? Share it on: