Zehn Übungen zu Eingabefeldern, value und Number — bis zu „7“ − „3“ + „3“.
Dein Fortschritt:
0 / 0 Aufgaben
1
Übungsaufgaben
Zehn interaktive Übungen zum Klicken, Ziehen und Knobeln — von AFB I bis AFB III. Jede Übung gibt dir sofort Rückmeldung; wenn du nicht weiterkommst, helfen die gestuften Tipps.
A1
Eingabefelder
AFB I
Ordne jedem Element seine Bedeutung zu.
Klicke links einen Eintrag an und dann rechts den passenden — es entsteht eine Verbindungslinie. Mit der Tastatur: Enter zum Auswählen, ↑/↓ zum Wandern.
Alle Felder sind input-Elemente; das Attribut type entscheidet über die Art.
Ansatz: range heißt Bereich.
Weiter: label beschriftet.
A2
Stimmt's? — value
AFB I
Gib an, ob die Aussagen stimmen.
5 Aussagen nacheinander. Eine falsche Einschätzung reicht — dann startest du die Serie mit „Neue Runde“ neu.
Aussage 1 von 5
Wer rechnen will, wandelt um und prüft danach.
Ansatz: Welchen Typ hat alles, was aus value kommt?
Weiter: Was ist ein leerer Text als Zahl?
A3
Verdoppeln
AFB I
Im Feld steht „15“. Bestimme den Wert von Number(feld.value) * 2.
Rechne selbst und trage das Ergebnis ein — Enter prüft direkt.
feld.value ist "15", Number("15") ist 15, mal 2 ergibt 30.
Ansatz: Erst umwandeln, dann rechnen.
Weiter: Number("15") ist die Zahl 15.
A4
Zahl oder NaN?
AFB II
Ordne zu, was Number(…) aus der Eingabe macht.
Ziehe jede Karte in den passenden Korb — oder wähle sie mit Enter aus und drücke dann die Ziffer des Korbs (0 legt sie zurück).
1gültige Zahl
2NaN
Leerzeichen am Rand werden ignoriert, der leere Text wird zu 0. Das Komma kennt JavaScript nicht als Dezimalzeichen; Buchstaben machen jede Eingabe ungültig.
Ansatz: Probiere gedanklich: Kann man damit rechnen?
Weiter: Dezimaltrennzeichen in JavaScript ist der Punkt.
A5
Taschengeld
AFB II
Im Feld a steht „12“, im Feld b „8“. Ermittle die Ergebnisse.
Löse die Kette Schritt für Schritt: Erst wenn ein Schritt stimmt, wird der nächste freigeschaltet. Enter prüft.
a.value + b.value:
Number(a.value) + Number(b.value):
a.value * 2:
+ mit zwei Texten verkettet → "128". Mit Number wird gerechnet → 20. * wandelt selbst um → 24.
Ansatz: Welche Operatoren verketten, welche rechnen?
Weiter: value ist Text.
A6
Anmeldung prüfen
AFB II
Wenn der Name fehlt oder das Häkchen bei #agb nicht gesetzt ist, soll eine Meldung erscheinen. Ergänze — zwei Wörter bleiben übrig.
Wort anklicken, dann Lücke anklicken (oder umgekehrt) — mit Tab und Enter geht es genauso. Ein Klick auf eine gefüllte Lücke legt das Wort zurück.
let name = document.querySelector("#name").;let agb = document.querySelector("#agb").;if (name === "" !agb) { meldung. = "Bitte alles ausfüllen."; }
Mit && käme die Meldung nur, wenn beides fehlt. checked ist bei Checkboxen schon ein boolean.
Ansatz: Checkbox: angehakt oder nicht?
Weiter: „oder“ heißt in JavaScript ||.
A7
Kilometer in Meter
AFB IIMix
Die Funktion auswerten läuft beim Klick. Stelle ihre Zeilen in der richtigen Reihenfolge dar.
Ziehe die Karten in die richtige Reihenfolge — mit der Tastatur: ↑/↓ verschiebt, Shift+↑/↓ wechselt nur den Fokus.
1function auswerten() {
2 let km = Number(feld.value);
3 if (feld.value === "" || isNaN(km)) {
4 ausgabe.textContent = "Bitte eine Zahl eingeben.";
5 } else {
6 ausgabe.textContent = km * 1000 + " m";
7 }
8}
Immer: lesen und umwandeln → prüfen → rechnen und ausgeben.
Ansatz: Was muss vor dem Prüfen passieren?
Weiter: Die Fehlermeldung gehört in den if-Zweig.
A8
Was fängt die Prüfung ab?
AFB III
let z = Number(feld.value);
if (feld.value === "" || isNaN(z) || z < 1) {
meldung.textContent = "Ungültiges Alter";
}
Untersuche, bei welchen Eingaben die Meldung erscheint.
Mehrere Antworten sind richtig. Markiere alle zutreffenden und klicke dann auf „Prüfen“.
„2,5“ wird wegen des Kommas zu NaN. „150“ rutscht durch — eine sinnvolle Prüfung bräuchte noch z > 120.
Ansatz: Prüfe jede der drei Teilbedingungen.
Weiter: Bei || reicht eine wahre Teilbedingung.
A9
Temperatur-Umrechner reparieren
AFB III
Beim Klick soll die Temperatur in Fahrenheit im Absatz #aus erscheinen. Überprüfe den Code und korrigiere die fehlerhaften Zeilen.
Klicke die fehlerhaften Zeilen an — dann klappt ein Feld auf, in das du die richtige Zeile schreibst. Geprüft werden Auswahl und Korrekturen (Leerzeichen sind egal).
Richtige Zeile:
Richtige Zeile:
value ist keine Funktion. Ein Absatz hat keinen value — Text setzt man mit textContent. Zeile 6 rechnet richtig, weil * selbst umwandelt; sicherer wäre trotzdem Number.
Ansatz: Eigenschaft oder Methode?
Weiter: value gibt es nur bei Formularfeldern.
A10
„7“ − „3“ + „3“
AFB IIITrick
In zwei Feldern stehen „7“ und „3“.
let a = feld1.value;
let b = feld2.value;
console.log(a - b + b);
Bestimme die Ausgabe.
Tippe die Antwort ein — Groß-/Kleinschreibung und Leerzeichen sind egal. Enter prüft direkt.
Von links: "7" - "3" rechnet (minus wandelt um) → 4. Dann 4 + "3": Text dabei → verketten → „43“. Nicht 7!
