Formulare verarbeiten (neu)

Lernziele

Sie können Eingaben aus Textfeldern, Zahlen, Checkboxen, Radio-Buttons und Dropdowns auslesen.

Sie können einfache Validierungen schreiben (leer? Zahl? im Bereich?).

Sie können das Ergebnis einer Berechnung dynamisch im HTML anzeigen.

Sie können kleine, sofort nützliche Werkzeuge für den Alltag bauen.

In Lektion 1 haben Sie gelernt, wie man Formulare aufbaut. In Lektion 3 haben Sie gesehen, wie man .value auf einem <input> ausliest. Jetzt verbinden wir beides zu echten kleinen Werkzeugen.

Werte aus verschiedenen Eingabefeldern lesen

Je nach Typ des Eingabefelds lesen Sie den Wert anders aus:

Feldtyp	Auslesen	Was Sie zurückbekommen
`<input type="text">`	`element.value`	String
`<input type="number">`	`element.value`	String! (mit `Number(...)` umwandeln)
`<input type="checkbox">`	`element.checked`	`true` oder `false`
`<input type="radio">` (Gruppe)	`document.querySelector('[name=xy]:checked').value`	String oder `null`
`<select>`	`element.value`	Wert der gewählten `<option>`
`<textarea>`	`element.value`	String mit Zeilenumbrüchen

Hier alle in einem Beispiel:

Validieren — Eingaben prüfen, bevor man rechnet

Nutzer:innen geben nicht immer brave Werte ein. Bevor Sie weiterrechnen, sollten Sie prüfen, ob die Eingabe sinnvoll ist.

return in einer Funktion bricht sie sofort ab. So können Sie alle Fehlerfälle abfangen, bevor Sie zur eigentlichen Logik kommen ("early return"). Das ist viel lesbarer als verschachtelte if-Blöcke.

BMI-Rechner — Übung 1

Bauen Sie einen BMI-Rechner. Die Formel ist:

BMI = \frac{Gewicht\ (\text{kg})}{Gr\ddot{o}sse\ (\text{m})^2}

Eingaben:

Gewicht in Kilogramm (Zahl)
Grösse in Zentimetern (Zahl)

Ausgabe:

Der berechnete BMI auf eine Stelle nach dem Komma gerundet (bmi.toFixed(1)).
Eine Einordnung: unter 18.5 = Untergewicht, 18.5–24.9 = Normalgewicht, 25–29.9 = Übergewicht, 30+ = Adipositas.

Wichtiger Disclaimer im Code

Bauen Sie unter den Rechner einen kleinen Hinweis ein, dass der BMI ein sehr grobes Mass ist und für Athletinnen, Kinder, ältere Menschen und Schwangere wenig aussagt. Lassen Sie diesen Hinweis immer sichtbar.

Mögliche Lösung

function rechnen() {
  const gewicht = Number(document.getElementById("gewicht").value);
  const groesseCm = Number(document.getElementById("groesse").value);
  const ergebnis = document.getElementById("ergebnis");

  if (isNaN(gewicht) || isNaN(groesseCm) || gewicht <= 0 || groesseCm <= 0) {
    ergebnis.textContent = "Bitte gültige Werte eingeben.";
    return;
  }

  const groesseM = groesseCm / 100;
  const bmi = gewicht / (groesseM * groesseM);

  let kategorie;
  if (bmi < 18.5) {
    kategorie = "Untergewicht";
  } else if (bmi < 25) {
    kategorie = "Normalgewicht";
  } else if (bmi < 30) {
    kategorie = "Übergewicht";
  } else {
    kategorie = "Adipositas";
  }

  ergebnis.textContent = `Ihr BMI: ${bmi.toFixed(1)} (${kategorie})`;
}

Trinkgeld-Rechner — Übung 2

Bauen Sie ein Werkzeug, das beim Restaurantbesuch das Trinkgeld ausrechnet.

Eingaben:

Rechnungsbetrag in CHF
Trinkgeld-Prozentsatz (mit <input type="range" min="0" max="25" value="10">)
Anzahl Personen

Ausgaben (live aktualisiert, ohne Knopfdruck — nutzen Sie das input-Event):

Trinkgeld-Betrag
Gesamtbetrag
Pro Person

Tipp: Live-Update
Statt onclick auf einem Knopf können Sie ein input-Event nehmen, das bei jeder Änderung feuert:
document.getElementById("rechnung").addEventListener("input", aktualisieren);

Mögliche Lösung

function aktualisieren() {
  const rechnung = Number(document.getElementById("rechnung").value);
  const prozent  = Number(document.getElementById("prozent").value);
  const personen = Number(document.getElementById("personen").value);

  document.getElementById("prozentAnzeige").textContent = prozent;

  if (rechnung <= 0 || personen <= 0) {
    return;
  }

  const trinkgeld = rechnung * prozent / 100;
  const gesamt    = rechnung + trinkgeld;
  const proPerson = gesamt / personen;

  document.getElementById("trinkgeld").textContent = trinkgeld.toFixed(2);
  document.getElementById("gesamt").textContent    = gesamt.toFixed(2);
  document.getElementById("proPerson").textContent = proPerson.toFixed(2);
}

// Bei jeder Änderung neu berechnen
document.getElementById("rechnung").addEventListener("input", aktualisieren);
document.getElementById("prozent").addEventListener("input", aktualisieren);
document.getElementById("personen").addEventListener("input", aktualisieren);

// Einmal initial
aktualisieren();

Umfrage-Auswertung — Übung 3

Bauen Sie eine kleine Umfrage mit drei Ja/Nein-Fragen. Beim Klick auf "Auswerten":

Zähle, wie viele "Ja" angekreuzt sind.
Zeige eine entsprechende Auswertung an, z.B. "Sie haben 2 von 3 Fragen mit Ja beantwortet."
Bonus: Eine Empfehlung, die vom Ergebnis abhängt.

Mögliche Lösung

function auswerten() {
  const fragen = document.querySelectorAll(".frage");
  let jaAnzahl = 0;

  for (const f of fragen) {
    if (f.checked) {
      jaAnzahl = jaAnzahl + 1;
    }
  }

  let nachricht;
  if (jaAnzahl === 3) {
    nachricht = "Komplett-Morgenmensch! 🌅";
  } else if (jaAnzahl === 2) {
    nachricht = "Ziemlich morgens-aktiv. ☕";
  } else if (jaAnzahl === 1) {
    nachricht = "Eher Mittel-Lerche.";
  } else {
    nachricht = "Definitiv kein Morgenmensch. 🦉";
  }

  document.getElementById("resultat").textContent =
    `Sie haben ${jaAnzahl} von 3 Fragen mit Ja beantwortet — ${nachricht}`;
}

Zusammenfassung

Zusammenfassung
Werte auslesen

Text/Zahl/Select/Textarea: element.value (immer String — bei Zahlen Number(...)).

Checkbox: element.checked (true/false).

Radio-Gruppe: document.querySelector('input[name="x"]:checked').value.

Validieren mit early return
if (eingabe === "") return;
if (isNaN(zahl)) return;
if (zahl < 0 || zahl > 100) return;
// ... eigentliche Logik
Live-Aktualisierung
element.addEventListener("input", aktualisieren);
Damit reagiert Ihr Code bei jedem Tastendruck oder Slider-Drag.
Zahlen formatieren

(3.14159).toFixed(2) → "3.14" (zwei Stellen nach dem Komma).