mitmario.dev

Abschnitt 13 · Lektion 1

Werte lesen

JavaScript Im Browser 3 Min Lesezeit 3 BeispieleLektion 1 von 6

Ein Formular ist der häufigste Ort, an dem eine Seite etwas vom Benutzer erfährt. Bevor man damit arbeiten kann, muss man es auslesen, und je nach Feldtyp steht der Wert an einer anderen Stelle.

value, und es ist Text

value ist immer Text 
const name = document.getElementById("name");
const alterFeld = document.getElementById("alter");
const leer = document.getElementById("leer");

console.log("Name:", name.value, "| Typ:", typeof name.value);

// Auch bei type="number" kommt Text heraus.
console.log("Alter:", alterFeld.value, "| Typ:", typeof alterFeld.value);
console.log("plus 1 ohne Umwandeln:", alterFeld.value + 1);
console.log("plus 1 mit Number():", Number(alterFeld.value) + 1);

// Ein leeres Feld liefert einen leeren Text, nicht null
// und nicht undefined. Damit greift die Falsy-Regel aus 3.3.
console.log("leer:", JSON.stringify(leer.value), "| falsy?", !leer.value);

// Deshalb reicht diese Prüfung für "hat etwas eingegeben".
console.log("ausgefüllt?", leer.value.trim() !== "");

Bei Textfeldern steht die Eingabe in value. Das gilt auch für type="email", type="search", type="password" und für ein textarea.

Es ist immer Text. Auch bei type="number". Der Browser sorgt zwar dafür, dass dort nur Ziffern landen, aber was du bekommst, ist eine Zeichenkette. alterFeld.value + 1 ergibt deshalb "341" und nicht 35.

Das ist die Falle aus Lektion 2.7, an ihrem natürlichsten Ort. Wer mit einem Formularwert rechnen will, wandelt vorher um: Number(feld.value).

Ein leeres Feld liefert "", nicht null und nicht undefined. Ein leerer Text ist falsy im Sinne von Lektion 3.3, also fängt if (!feld.value) den leeren Fall ab. Für die Prüfung „hat wirklich etwas eingegeben” nimmt man feld.value.trim() !== "", denn drei Leerzeichen sind nicht leer, aber auch keine Eingabe.

Hier lohnt sich ein eigener Versuch, denn er zeigt den Unterschied aus Lektion 10.5 zum ersten Mal an einer Stelle, an der er weh tut. Tipp einen anderen Namen in das erste Feld auf der Seite und frag danach in der Eingabezeile der Console beides ab: document.getElementById("name").value antwortet mit dem, was jetzt dort steht, document.getElementById("name").getAttribute("value") weiter mit Ida. Das Attribut ist der Anfangswert und bleibt stehen, die Eigenschaft ist der Stand von jetzt. Fass dabei den Editor nicht an: Jede Änderung dort baut die Seite neu, und dann steht wieder Ida im Feld.

checked bei Kästchen und Radios

checked bei Kästchen und Radios 
const newsletter = document.getElementById("newsletter");

// Bei einem Kästchen zählt checked, nicht value.
console.log("checked:", newsletter.checked);
console.log("value dagegen:", newsletter.value);

// value steht auch dann da, wenn niemand angehakt hat.
// Der Wert sagt, WAS angehakt würde, nicht OB.
newsletter.checked = false;
console.log("nach dem Abhaken, checked:", newsletter.checked);
console.log("nach dem Abhaken, value:", newsletter.value);

// Radios gehören über ihr name-Attribut zusammen. Gesucht
// ist die eine mit :checked.
const gewaehlt = document.querySelector('input[name="stufe"]:checked');
console.log("Stufe:", gewaehlt.value);

// Hat niemand gewählt, liefert querySelector null. Das ist
// der Fall, den man immer mitdenken muss.
const keine = document.querySelector('input[name="gibtesnicht"]:checked');
console.log("nicht gewählt:", keine);

Ein Ankreuzfeld hat ebenfalls ein value, und das ist fast immer die falsche Stelle. value sagt, was angehakt würde, nicht ob angehakt ist. Es steht auch dann da, wenn niemand das Kästchen berührt hat.

Gefragt ist checked, und das ist ein Wahrheitswert.

Radios gehören über ihr name-Attribut zusammen. Innerhalb einer Gruppe kann genau eine gewählt sein, und man findet sie mit dem Selektor input[name="stufe"]:checked.

Wichtig dabei: Hat niemand gewählt, liefert querySelector null. Ein .value darauf ist der TypeError aus Lektion 10.4, und in einem Formular ohne Vorauswahl ist das der Normalfall und kein Ausnahmefall.

Auswahllisten und der Zugriff über name

Auswahllisten und der Zugriff über name 
const formular = document.getElementById("formular");

// Eine einfache Auswahlliste verhält sich wie ein Textfeld:
// value ist der Wert der gewählten Option.
const thema = formular.querySelector('[name="thema"]');
console.log("Thema:", thema.value);
console.log("angezeigter Text:", thema.selectedOptions[0].textContent);

// Bei multiple ist value nur die erste Auswahl. Gebraucht
// wird die ganze Liste.
const tage = formular.querySelector('[name="wochentage"]');
console.log("value bei multiple:", tage.value);
console.log("alle:", [...tage.selectedOptions].map((o) => o.value));

// Über name statt über Position: das überlebt jedes Umsortieren.
console.log("Name über querySelector:", formular.querySelector('[name="name"]').value);

Eine einfache Auswahlliste verhält sich wie ein Textfeld: value ist der Wert der gewählten Option. Was der Benutzer dort sieht, ist der Text der Option, und der steht in selectedOptions[0].textContent. Die beiden sind verschieden, und das ist Absicht: der Wert ist für dein Programm, der Text für den Menschen.

Bei multiple reicht value nicht, es liefert nur die erste Auswahl. Die vollständige Antwort steht in selectedOptions, und mit den drei Punkten aus Lektion 7.6 wird eine Liste daraus.

Über name, nicht über Position

Für den Zugriff auf ein Feld gibt es mehrere Wege, und einer davon altert schlecht.

Über die Position (formular.elements[2], querySelectorAll("input")[1]) funktioniert genau so lange, bis jemand ein Feld einfügt oder zwei vertauscht. Dann liest der Code stillschweigend das falsche Feld aus, und einen Fehler gibt es nicht.

Über name ist stabil. Das Attribut ist ohnehin nötig, sobald das Formular abgeschickt wird oder FormData ins Spiel kommt (Lektion 13.4), und es beschreibt, was das Feld bedeutet.

Eine id tut es genauso, solange es sie gibt. Der Unterschied: name gehört zum Formular, id zum Dokument. Wer beides vergibt, hat es am bequemsten.

Zum Mitnehmen

value liefert immer Text, auch bei type="number". Wer damit rechnet, ohne umzuwandeln, hängt Zeichenketten aneinander.

Jetzt du

Basis Konto, kostenlos

Zu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.

Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.

Was in dieser Lektion steckt

  • Artikel mit 3 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.