Eingabewerte lesen
Greifen Sie auf Werte aus Text-, Checkbox- und Select-Eingaben zu.
Eingabewerte lesen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Arbeiten mit Formulardaten
Formulare erfassen Benutzereingaben über Felder wie Textfelder, Kontrollkästchen, Optionsfelder und Dropdowns. Jedes dieser Elemente stellt seine Daten etwas anders bereit.
input.value
Textähnliche Eingabefelder stellen ihren aktuellen Inhalt über die Eigenschaft value bereit, und zwar immer als Zeichenkette.
const name = document.querySelector("#name");
console.log(name.value);value ist immer eine Zeichenkette
Selbst Zahleneingabefelder geben eine Zeichenkette zurück. Wandeln Sie den Wert ausdrücklich um, wenn Sie eine Zahl benötigen.
const age = document.querySelector("#age");
const n = Number(age.value);valueAsNumber
Zahlen- und Datumseingabefelder bieten valueAsNumber, das direkt eine Zahl zurückgibt (oder NaN, wenn das Feld leer oder ungültig ist).
const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);checkbox.checked
Kontrollkästchen geben ihren Zustand über die boolesche Eigenschaft checked an, nicht über value.
const agree = document.querySelector("#agree");
console.log(agree.checked); // true or falseOptionsfelder
Ermitteln Sie in einer Gruppe von Optionsfeldern das ausgewählte Feld. Die Eigenschaft checked kennzeichnet die ausgewählte Option.
const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");Wert von select
Ein Dropdown mit einfacher Auswahl stellt die ausgewählte Option über value bereit.
const country = document.querySelector("#country");
console.log(country.value);Mehrfachauswahl
Lesen Sie bei einer Mehrfachauswahl selectedOptions aus und bilden Sie daraus die Werte ab.
const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);Das input-Ereignis
Hören Sie auf das input-Ereignis, um auf jeden Tastendruck oder jede Änderung in Echtzeit zu reagieren.
name.addEventListener("input", (e) => {
console.log(e.target.value);
});Das change-Ereignis
Das change-Ereignis wird ausgelöst, wenn ein Feld nach einer Wertänderung den Fokus verliert, bei Kontrollkästchen und Auswahllisten jedoch sofort.
country.addEventListener("change", (e) => {
console.log("chose " + e.target.value);
});FormData
FormData erfasst alle benannten Felder eines Formulars auf einmal und eignet sich daher ideal zum Senden an einen Server.
const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));Kurztest
Lesen Sie das Kontrollkästchen korrekt aus.
Zusammenfassung
Lesen Sie Texteingaben über value aus (immer eine Zeichenkette; verwenden Sie für Zahlen valueAsNumber), Kontrollkästchen und Optionsfelder über checked und Dropdowns über value oder selectedOptions. Reagieren Sie mit dem input-Ereignis (jede Änderung) oder dem change-Ereignis (bei der Übernahme) und erfassen Sie mit FormData alles auf einmal.
Häufig gestellte Fragen
Ist die Lektion „Eingabewerte lesen“ kostenlos?
Ja — der vollständige Text von „Eingabewerte lesen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Eingabewerte lesen“?
Greifen Sie auf Werte aus Text-, Checkbox- und Select-Eingaben zu. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um JavaScript Academy zu starten?
Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Eingabewerte lesen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.