Eingabe
Inhalt mit „innerHTML“ auslesen
Mit der Eigenschaft „innerHTML“ kann der Inhalt von HTML-Elementen ausgelesen werden. Im folgenden Beispiel werden die Elemente jeweils mit „getElementById()“ ermittelt und mit „innerHTML“ deren Inhalt ausgelesen:
HTML-Datei:
Ergebnis:
| Vorname: | Max |
|---|---|
| Nachname: | Muster |
Inhalt mit „value“ auslesen
Mit der Eigenschaft „value“ kann der Inhalt von Formularelementen ausgelesen werden. Auch hier werden die Elemente zunächst mit „getElementById()“ ermittelt und mit „value“ dann deren Inhalt ausgelesen:
HTML-Datei:
Ergebnis:
Textfeld:
Zahlenfeld:
Schieberegler:
Farbauswahl:
Textbereich:
Abschlussübung
Als Abschlussübung kannst du folgendes Beispiel für eine Webseite zur Hotelreservierung erstellen:
Mein Hotel
Buchungsdetails
Folgende Daten wurden an den Bestellservice übermittelt:
Gehe dabei wie folgt vor:
- Erstelle sechs „input“-Elemente mit jeweils einer eigenen ID
- Erstelle sechs „label“-Elemente, passend zu den „input“-Elementen, die ebenfalls über eine eindeutige ID verfügen
- Der Typ der „input“-Elemente ist:
- text
- date
- date
- number
- number
- number
- Setze im JavaScript-Teil die Datumsfelder wie folgt:
-
- ...value = „2017-07-01“;
- ...value = „2017-07-08“;
- Lese alle Label- und Input-Elemente mit „innerHTML“ und „value“ ein und gebe das Ergebnis aus
Die Lösung kannst du dir zur Kontrolle hier herunterladen:
