HTMLInputElement: valueAsNumber 속성

요소의 값을 나타내는 숫자이며 숫자로 변환할 수 없는 경우 NaN

이번 예제에서는 number 입력 값이 변경될 때 로그에 현재 값이 표시됩니다.

HTML

number 타입의 , 이와 연관된 그리고 출력을 위한

 컨테이너를 포함하고 있습니다.

html
Pick a number between 1 and 10:





JavaScript
 요소의 innerText는 change 이벤트가 발생할 때마다 의 현재 값으로 업데이트 됩니다.

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;
}

결과

위젯에서 숫자를 삭제하면 결과는 NaN이 됩니다.

이번 예제에서는 datetime-local 타입의 에서 valueAsNumber 속성을 보여줍니다.

HTML

datetime-local 타입의 을 포함하고 있습니다.

Pick a date and time:

JavaScript

날짜와 시간이 선택되지 않으면 빈 문자열이 NaN으로 처리됩니다. 시간이 선택될 때마다 change 이벤트가 발생하며,

 콘텐츠가 업데이트 되어 폼 컨트롤의 HTMLInputElement.value 값을 숫자 값과 비교하여 표시됩니다.

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;
}

결과

• HTMLInputElement.value
• HTMLInputElement.valueAsDate