Wat is de eigenschap valueAsNumber?

De eigenschap valueAsNumber is beschikbaar op HTML-elementen <input>. Het geeft de numerieke weergave van de waarde van het invoerveld terug, als de browser deze als een getal kon parseren. Anders geeft het NaN terug.

Deze eigenschap is vooral handig voor <input type="number">, <input type="range">, <input type="date"> en <input type="time">, omdat het automatisch de conversie van stringwaarde naar numerieke waarde of numerieke datum/tijd-weergave afhandelt.

Voorbeeld van gebruik:

// Element ophalen
const numberInput = document.getElementById('myNumberInput');

// Numerieke waarde ophalen
const valueAsNumber = numberInput.valueAsNumber;

// Controleren of de conversie geslaagd is
if (isNaN(valueAsNumber)) {
  console.log('De waarde is geen getal.');
} else {
  console.log('Numerieke waarde:', valueAsNumber);
}

Als het invoerelement het type date of time heeft, geeft valueAsNumber het aantal milliseconden sinds het begin van de epoch (1 januari 1970, 00:00:00 UTC).

// Element ophalen van type date
const dateInput = document.getElementById('myDateInput');

// Timestamp in milliseconden
const timestamp = dateInput.valueAsNumber;

console.log('Timestamp:', timestamp);

// Omzetten naar Date-object
const dateObject = new Date(timestamp);
console.log('Date-object:', dateObject);

Het is belangrijk op te merken dat valueAsNumber automatisch rekening houdt met lokale instellingen voor het formatteren van getallen en datums bij het parseren, wat het werken met internationaal georiënteerde webapplicaties vereenvoudigt in vergelijking met handmatige parsing van value.