Formulare auswerten

Formularelemente nehmen Eingaben entgegen. JavaScript liest sie über die Eigenschaft value aus — meist nach einem Klick auf einen Knopf.

<label for="alter">Alter:</label>
<input type="number" id="alter">
<button id="pruefen">Prüfen</button>
<p id="ausgabe"></p>

• input:Eingabefeld; type legt die Art fest: text, number, range (Schieberegler), checkbox.
• label:Beschriftung; for verweist auf die id des Felds — Klick auf die Beschriftung setzt den Cursor ins Feld.
• value:feld.value ist der aktuelle Inhalt — immer ein string, auch bei type="number".
• checked:bei Checkboxen: true oder false.
• Zeitpunkt:erst im Klick-Listener auslesen; beim Laden ist das Feld noch leer.

Vor dem Rechnen wird aus dem Text eine Zahl, danach wird geprüft, ob die Eingabe überhaupt sinnvoll ist.

const feld = document.querySelector("#alter");
const ausgabe = document.querySelector("#ausgabe");
document.querySelector("#pruefen").addEventListener("click", auswerten);
function auswerten() {
  let alter = Number(feld.value);
  if (feld.value === "" || isNaN(alter)) {
    ausgabe.textContent = "Bitte eine Zahl eingeben.";
  } else if (alter >= 12) {
    ausgabe.textContent = "Film ab 12: Einlass!";
  } else {
    ausgabe.textContent = "Leider noch zu jung.";
  }
}

• Number(…):wandelt Text in eine Zahl; aus "abc" wird NaN („keine Zahl“).
• isNaN(x):ist true, wenn x keine gültige Zahl ist.
• Leeres Feld:Number("") ergibt 0 — deshalb leere Eingaben extra prüfen.
• + und *:"3" + "2" verkettet zu "32"; "3" * 8 rechnet 24, weil * selbst umwandelt. Sicher ist nur Number.
• Ausgeben:Ergebnis mit textContent in ein Element der Seite schreiben, nicht mit alert.

Stelle mit den beiden Reglern — selbst Formularfelder — eine Bestellung ein. Die Bühne zeigt, was value liefert und was das Programm daraus rechnet. Schalte im Balken zwischen den beiden Programmversionen um und teste auch 0 Karten.

Halte fest: value liefert immer Text. Erst Number(…) macht daraus eine Zahl, mit der + rechnet und === 0 vergleicht.