Why does 'valueAsNumber' return NaN as a value?

Question

In the code below, I am trying to call valueAsNumber but I just get a NaN returned. When I use parseInt I get the result I expect. Why Is this?

Answer 1

Your expectations are reasonable considering the property name, but reading actual specs/documentation:

The valueAsNumber IDL attribute represents the value of the element, interpreted as a number.

On getting, if the valueAsNumber attribute does not apply, as defined for the input element's type attribute's current state, then return a Not-a-Number (NaN) value.

Here's a table that list's types that apply to valueAsNumber. These are:

• Date and Time (datetime) (Note this type="" is now obsolete in HTML LS)
• Date (date)
• Month (month)
• Week (week)
• Time (time)
• Local Date and Time (datetime-local)
• Number (number)
• Range (range)

Observe that type="text" is conspicuously absent from the above list, therefore textInput.valueAsNumber will always return NaN even when isNaN( parseInt( textInput.value, 10 ) ) === false.

Answer 2

You have to set the type of your input to number:

<input name="number1" type="number">

Also, if the value is empty or non-numeric, it'll return NaN.