HTMLInputElement: свойство valueAsNumber

Свойство valueAsNumber интерфейса HTMLInputElement представляет собой текущее значение элемента <input> в виде числа или NaN, если преобразование в числовое значение невозможно.

Это свойство также можно устанавливать напрямую, например, для задания значения по умолчанию в зависимости от каких-либо условий.

Число, представляющее значение элемента, или NaN, если преобразование в число невозможно.

В этом примере журнал отображает текущее значение числового поля ввода числового при изменении.

HTML

Мы включаем элемент <input> типа number и связанный с ним <label>, с контейнером <pre> для вывода результата.

<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

Свойство innerText элемента <input> обновляется до текущего значения элемента <input> каждый раз, когда срабатывает событие change.

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

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

Результаты

Если вы удалите число в виджете, результат будет NaN.

Этот пример демонстрирует свойство valueAsNumber элемента <input> типа datetime-local.

HTML

Мы включаем элемент <input> типа datetime-local:

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

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

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

JavaScript

Когда дата или время не выбраны, пустая строка преобразуется в NaN. Каждый раз при выборе значения срабатывает событие change, обновляющее содержимое <pre>, отображающее значение HTMLInputElement.value элемента управления по сравнению с его числовым представлением.

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()}`;
});

Результаты

• <input>
• HTMLInputElement.value
• HTMLInputElement.valueAsDate