Repository navigation
Expand file tree
/
Copy pathindex.md
More file actions
120 lines (78 loc) · 3.61 KB
/
Copy pathindex.md
File metadata and controls
120 lines (78 loc) · 3.61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
---
title: "HTMLInputElement: valueAsNumber-Eigenschaft"
short-title: valueAsNumber
slug: Web/API/HTMLInputElement/valueAsNumber
l10n:
sourceCommit: 3a5e079301779c589f35b35620b12a7a73c42fa2
---
{{ APIRef("HTML DOM") }}
Die **`valueAsNumber`**-Eigenschaft des [`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)-Interfaces repräsentiert den aktuellen Wert des {{htmlelement("input")}}-Elements als Zahl oder `NaN`, 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, oder `NaN`, wenn die numerische Konvertierung unmöglich ist.
## Beispiele
### Abrufen eines Zahlenwertes
In diesem Beispiel zeigt das Protokoll den aktuellen Wert des {{HTMLElement("input/number", "number")}}-Eingabefelds, wenn es geändert wird.
#### HTML
Wir fügen ein {{htmlelement("input")}} des Typs `number` und ein zugehöriges {{htmlelement("label")}} sowie einen {{htmlelement("pre")}}-Container für unsere Ausgabe ein.
```html
<label for="number">Pick a number between 1 and 10:</label>
<input name="number" id="number" min="1" max="10" type="number" />
<pre id="log"></pre>
```
#### JavaScript
Das [`innerText`](/de/docs/Web/API/HTMLElement/innerText) des `<pre>`-Elements wird bei jedem [`change`](/de/docs/Web/API/HTMLElement/change_event)-Ereignis auf den aktuellen Wert des `<input>`-Elements aktualisiert.
```js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("number");
inputElement.addEventListener("change", () => {
logElement.innerText = `Number: ${inputElement.valueAsNumber}`;
});
```
```css hidden
#log {
height: 20px;
padding: 0.5rem;
background-color: #ededed;
}
```
#### Ergebnisse
{{EmbedLiveSample("Retrieving a number value", "", 100)}}
Wenn Sie die Zahl im Widget löschen, ist das Ergebnis `NaN`.
### Abrufen eines Datumswertes als Zahl
Dieses Beispiel demonstriert die `valueAsNumber`-Eigenschaft eines `<input>` mit dem Typ {{HTMLElement("input/datetime-local", "datetime-local")}}.
#### HTML
Wir fügen ein `<input>` des Typs `datetime-local` ein:
```html
<label for="date">Pick a date and time:</label>
<input name="date" id="date" type="datetime-local" />
<pre id="log"></pre>
```
#### JavaScript
Wenn kein Datum oder keine Uhrzeit ausgewählt ist, ergibt der leere String `NaN`. Jedes Mal, wenn eine Auswahl getroffen wird, wird ein [`change`](/de/docs/Web/API/HTMLElement/change_event)-Ereignis ausgelöst, das den Inhalt des `<pre>`-Elements aktualisiert und den [`HTMLInputElement.value`](/de/docs/Web/API/HTMLInputElement/value) des Formularelements im Vergleich zu diesem Wert als Zahl anzeigt.
```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()}`;
});
```
```css hidden
#log {
height: 20px;
padding: 0.5rem;
background-color: #ededed;
}
```
#### Ergebnisse
{{EmbedLiveSample("Retrieving a date value as a number", "", 100)}}
## Spezifikationen
{{Specifications}}
## Browser-Kompatibilität
{{Compat}}
## Siehe auch
- {{HTMLElement("input")}}
- [`HTMLInputElement.value`](/de/docs/Web/API/HTMLInputElement/value)
- [`HTMLInputElement.valueAsDate`](/de/docs/Web/API/HTMLInputElement/valueAsDate)