HTMLInputElement: valueAsNumber property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The valueAsNumber property of the HTMLInputElement interface represents the current value of the <input> element as a number or NaN if converting to a numeric value is not possible.

This property can also be set directly, for example to set a default numeric value based on some condition.

Value

A number that represents the value of the element or NaN if numeric conversion is impossible.

Examples

Retrieving a number value

In this example, the log displays the current value of the number input when changed.

HTML

We include an <input> of type number and an associated <label>, with a <pre> container for our output.

html
<label for="number">Pick a number between 1 and 10:</label>

<input name="number" id="number" min="1" max="10" type="number" />

<pre id="log"></pre>

JavaScript

The <pre> element's innerText is updated to the current value of the <input> every time a change event is fired.

js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("number");

inputElement.addEventListener("change", () => {
  logElement.innerText = `Number: ${inputElement.valueAsNumber}`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

Results

If you delete the number in the widget, the result is NaN.

Retrieving a date value as a number

This example demonstrates the valueAsNumber property of an <input> with type datetime-local.

HTML

We include an <input> of type datetime-local:

html
<label for="date">Pick a date and time:</label>

<input name="date" id="date" type="datetime-local" />

<pre id="log"></pre>

JavaScript

When no date or time is selected, the empty string resolves to NaN. Each time a selection is made, a change event is fired, updating the <pre> content showing the HTMLInputElement.value of the form control compared to that value as a number.

js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("date");

logElement.innerText = `Initial value: ${inputElement.valueAsNumber}`;

inputElement.addEventListener("change", () => {
  const d = new Date(inputElement.valueAsNumber);
  logElement.innerText = `${inputElement.value} resolves to ${inputElement.valueAsNumber}, \nwhich is ${d.toDateString()} at ${d.toTimeString()}`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

Results

Specifications

Specification

HTML
# dom-input-valueasnumber-dev

Browser compatibility

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Aug 23, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTMLInputElement: valueAsNumber property

In this article

Value

Examples

Retrieving a number value

HTML

JavaScript

Results

Retrieving a date value as a number

HTML

JavaScript

Results

Specifications

Browser compatibility

See also

Help improve MDN