DievalueAsNumber-Eigenschaft desHTMLInputElement-Interfaces repräsentiert den aktuellen Wert des<input>-Elements als Zahl oderNaN, wenn eine Umwandlung in einen numerischen Wert nicht möglich ist.

Diese Eigenschaft kann auch direkt gesetzt werden, um beispielsweise einen Standardwert basierend auf einer Bedingung festzulegen.

Wert

Eine Zahl, die den Wert des Elements darstellt, oderNaN, wenn die numerische Konvertierung unmöglich ist.

Beispiele

Abrufen eines Zahlenwertes

In diesem Beispiel zeigt das Protokoll den aktuellen Wert desnumber-Eingabefelds, wenn es geändert wird.

HTML

Wir fügen ein<input> des Typsnumber und ein zugehöriges<label> sowie einen<pre>-Container für unsere Ausgabe ein.

<label for="number">Pick a number between 1 and 10:</label><input name="number" min="1" max="10" type="number" /><pre></pre>

JavaScript

DasinnerText des<pre>-Elements wird bei jedemchange-Ereignis auf den aktuellen Wert des<input>-Elements aktualisiert.

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

Ergebnisse

Wenn Sie die Zahl im Widget löschen, ist das ErgebnisNaN.

Abrufen eines Datumswertes als Zahl

Dieses Beispiel demonstriert dievalueAsNumber-Eigenschaft eines<input> mit dem Typdatetime-local.

HTML

Wir fügen ein<input> des Typsdatetime-local ein:

<label for="date">Pick a date and time:</label><input name="date" type="datetime-local" /><pre></pre>

JavaScript

Wenn kein Datum oder keine Uhrzeit ausgewählt ist, ergibt der leere StringNaN. Jedes Mal, wenn eine Auswahl getroffen wird, wird einchange-Ereignis ausgelöst, das den Inhalt des<pre>-Elements aktualisiert und denHTMLInputElement.value des Formularelements im Vergleich zu diesem Wert als Zahl anzeigt.

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

Ergebnisse

Spezifikationen

Browser-Kompatibilität

Siehe auch

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