MINT lernen

Formulare auswerten

Zwei Textaufgaben mit Hinweisen und Erwartungshorizont — ein Notenrechner und eine Anmeldung, die immer leer bleibt.

Dein Fortschritt:
0 / 0 Aufgaben
1

Der Punkterechner

AFB I–II

Eine Lernseite rechnet Testpunkte in eine Rückmeldung um:

<label for="p">Punkte:</label>
<input type="number" id="p">
<button id="los">Auswerten</button>
<p id="aus"></p>
function auswerten() {
  let p = Number(feld.value);
  if (feld.value === "" || isNaN(p)) {
    aus.textContent = "Bitte Punkte eingeben.";
  } else if (p >= 40) {
    aus.textContent = "Sehr gut";
  } else if (p >= 30) {
    aus.textContent = "Gut";
  } else {
    aus.textContent = "Weiter üben";
  }
}
  1. Nenne die vier HTML-Elemente und ihre Aufgabe.
  2. Ermittle die Ausgabe für die Eingaben „38“, „40“, „“ (leer) und „45,5“.
  3. Erkläre, warum die Prüfung feld.value === "" nötig ist, obwohl es schon isNaN(p) gibt.

Hinweise

Hinweis zu Aufgabe a)
Beschriftung, Feld, Knopf, Ausgabe.
Hinweis zu Aufgabe b)
Das Komma macht aus „45,5“ keine Zahl.
Hinweis zu Aufgabe c)
Was ist Number("")?

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)

label beschriftet das Feld, input type="number" nimmt die Punkte auf, button startet die Auswertung, p#aus zeigt das Ergebnis.

Erwartungshorizont zu Aufgabe b)

„38“ → Gut · „40“ → Sehr gut · leer → Bitte Punkte eingeben. · „45,5“ → Bitte Punkte eingeben. (NaN; ein Zahlenfeld im Browser lässt Komma-Eingaben je nach Einstellung gar nicht erst durch)

Erwartungshorizont zu Aufgabe c)

Number("") ergibt 0 und nicht NaN. Ohne die erste Prüfung würde ein leeres Feld als 0 Punkte gewertet und „Weiter üben“ ausgeben, obwohl gar nichts eingegeben wurde.

2

Die Anmeldung bleibt leer

AFB II–III

Für die Klassenfahrt sollen Name und Anzahl der Begleitpersonen eingegeben werden. Lukas schreibt:

let name = document.querySelector("#name").value;
let begleiter = document.querySelector("#begleiter").value;
document.querySelector("#senden").addEventListener("click", senden);
function senden() {
  let personen = begleiter + 1;
  ausgabe.textContent = name + " kommt mit " + personen + " Person(en).";
}

Egal, was man eingibt: Es erscheint „ kommt mit 1 Person(en).“

  1. Überprüfe das Programm und erkläre, warum Name und Anzahl nie ankommen.
  2. Ermittle, was nach einer ersten Korrektur bei der Eingabe „Lara“ und „2“ ausgegeben würde, wenn Zeile 5 unverändert bleibt.
  3. Entwickle eine vollständig korrigierte Funktion senden mit Prüfung der Eingaben.

Hinweise

Hinweis zu Aufgabe a)
Wann werden Zeile 1 und 2 ausgeführt — vor oder nach der Eingabe?
Hinweis zu Aufgabe b)
value ist Text.
Hinweis zu Aufgabe c)
Lesen, umwandeln, prüfen, rechnen, ausgeben — alles in der Funktion.

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)

Zeile 1 und 2 laufen beim Laden der Seite, wenn die Felder noch leer sind. name und begleiter sind deshalb für immer "" — spätere Eingaben werden nie gelesen. "" + 1 ergibt „1“.

Erwartungshorizont zu Aufgabe b)

Werden die Werte erst in der Funktion gelesen, ist begleiter "2" und "2" + 1 ergibt „21“: „Lara kommt mit 21 Person(en).“

Erwartungshorizont zu Aufgabe c)

function senden() { let name = document.querySelector("#name").value; let b = Number(document.querySelector("#begleiter").value); if (name === "" || isNaN(b) || b < 0) { ausgabe.textContent = "Bitte Name und Anzahl prüfen."; } else { ausgabe.textContent = name + " kommt mit " + (b + 1) + " Person(en)."; } }