HTMLInputElement: valueAsNumber property

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

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

HTML

We include an of type number and an associated , with a

 container for our output.

html
Pick a number between 1 and 10:





JavaScript
The 
 element's innerText is updated to the current value of the  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.

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

HTML

We include an of type datetime-local:

Pick a date and time:

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

 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

• HTMLInputElement.value
• HTMLInputElement.valueAsDate