Wat is de eigenschap valueAsNumber?

De eigenschap valueAsNumber geeft de waarde van het input- of option-element als een drijvende-komma getal. Handig voor numerieke invoervelden (type="number", type="range") of om de numerieke waarde van het value-attribuut van een option-element te verkrijgen.

// Numerieke waarde ophalen uit een input van type "number"
const inputNumber = document.getElementById('myNumberInput');
const numberValue = inputNumber.valueAsNumber;
console.log(typeof numberValue); // Toont 'number'

// Numerieke waarde ophalen uit een optie
const selectElement = document.getElementById('mySelect');
const selectedOption = selectElement.options[selectElement.selectedIndex];
const optionNumberValue = selectedOption.valueAsNumber;
console.log(typeof optionNumberValue); // Toont 'number'

Als het element geen numerieke waarde heeft, geeft valueAsNumber NaN terug. Dit kan gebeuren bij niet-numerieke invoertypen of als de waarde niet kan worden omgezet in een getal.

Element	Type	Beschrijving
HTMLInputElement	number, range	Geeft de door de gebruiker ingevoerde numerieke waarde terug.
HTMLOptionElement	Elk	Geeft de numerieke waarde van het value-attribuut terug.