MINT lernen

Ereignisse und Klicks

Zehn Übungen zu Ereignissen und Event-Listenern — vom richtigen Ereignisnamen bis zum Listener, der sich selbst noch einmal anhängt.

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
Ereignisse und Auslöser
AFB I

Ordne jedem Ereignis seinen Auslöser zu.

Klicke links einen Eintrag an und dann rechts den passenden — es entsteht eine Verbindungslinie. Mit der Tastatur: Enter zum Auswählen, ↑/↓ zum Wandern.
Die Ereignisnamen sind englisch, kleingeschrieben und stehen ohne „on“ in Anführungszeichen.
Ansatz: key = Taste, input = Eingabe.
Weiter: mouseover braucht keinen Klick.
A2
Stimmt's? — Listener
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

Einmal anhängen — beliebig oft auslösen.
Ansatz: Wer ruft die Funktion auf, du oder der Browser?
Weiter: Vergleiche mit dem Merksatz der Seite.
A3
Runterzählen
AFB I
let n = 10;
knopf.addEventListener("click", minus);
function minus() {
  n = n - 2;
  anzeige.textContent = n;
}

Jemand klickt dreimal auf den Knopf. Bestimme die Anzeige danach.

Rechne selbst und trage das Ergebnis ein — Enter prüft direkt.
Jeder Klick ruft minus auf: 10 → 8 → 6 → 4. Die Variable n merkt sich den Stand zwischen den Klicks, weil sie außerhalb der Funktion angelegt ist.
Ansatz: Wie oft läuft die Funktion?
Weiter: n wird bei jedem Aufruf um 2 kleiner.
A4
Lichtschalter
AFB II

Ein Klick auf #licht soll die Klasse an der Lampe ein- und ausschalten. 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.

document.querySelector("#licht").(, ); function schalten() { lampe.classList.("an"); }

toggle fügt die Klasse hinzu, wenn sie fehlt, und entfernt sie, wenn sie da ist — ideal für Schalter. schalten() mit Klammern würde die Funktion schon beim Laden aufrufen.
Ansatz: Der Ereignisname steht ohne „on“.
Weiter: Welche classList-Methode schaltet hin und her?
A5
Vom Klick zur Anzeige
AFB II

Stelle dar, was nacheinander passiert.

Ziehe die Karten in die richtige Reihenfolge — mit der Tastatur: ↑/↓ verschiebt, Shift+↑/↓ wechselt nur den Fokus.
1Die Seite lädt, das Programm hängt den Listener an.
2Das Programm wartet — nichts passiert.
3Jemand klickt auf den Knopf.
4Der Browser erzeugt das Ereignis click.
5Der Browser ruft die übergebene Funktion auf.
6Die Funktion ändert eine Variable.
7Die Funktion aktualisiert die Anzeige.
Das Muster heißt ereignisgesteuert: Ereignis → Zustand ändern → Anzeige aktualisieren.
Ansatz: Zuerst muss der Zuhörer da sein.
Weiter: Erst rechnen, dann anzeigen.
A6
Reagiert der Knopf?
AFB II

Es gibt const b = document.querySelector("#b"); und eine Funktion start. Ordne jede Zeile zu.

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).
1funktioniert
2Fehlermeldung in der Konsole
3läuft, reagiert aber nie
Unbekannte Namen (click ohne Anführungszeichen, Start, addeventlistener) führen zu Fehlern. Ein falsch geschriebener Ereignisname ist dagegen erlaubt — es tritt nur nie ein solches Ereignis auf.
Ansatz: Was ist Text, was ein Name?
Weiter: Ein Ereignis „Click“ mit großem C gibt es nicht — aber ist das ein Fehler?
A7
Pfeiltasten
AFB II Mix
let x = 0;
document.addEventListener("keydown", taste);
function taste(event) {
  if (event.key === "ArrowRight") {
    x = x + 10;
  } else if (event.key === "ArrowLeft") {
    x = x - 10;
  }
}

Ermittle den Wert von x.

Löse die Kette Schritt für Schritt: Erst wenn ein Schritt stimmt, wird der nächste freigeschaltet. Enter prüft.
  1. nach den Tasten → → ←:
  2. danach noch die Tasten A und →:
→ → ← ergibt +10 +10 −10 = 10. Die Taste A erfüllt keine Bedingung, x bleibt 10; → macht 20.
Ansatz: Jede Taste löst die Funktion einmal aus.
Weiter: Andere Tasten gehen durch beide Bedingungen durch.
A8
Like-Knopf reparieren
AFB III

Jeder Klick auf das Herz soll die Likes um 1 erhöhen und anzeigen. Ü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).
Argumente werden durch Komma getrennt. Auch eine Funktion ohne Parameter braucht in der Definition leere Klammern.
Ansatz: Zwei Argumente brauchen ein Trennzeichen.
Weiter: Vergleiche mit function name() { … }.
A9
Zähler mit Reset
AFB III

Vervollständige den Zähler mit den Knöpfen #plus und #reset.

Wähle in jedem Menü den passenden Eintrag und prüfe dann alle auf einmal.
plus.addEventListener(, erhoehe);
reset.addEventListener("click", );

function erhoehe() {
  n = n + 1;
  zeige();
}
function nullsetzen() {
  n = ;
  zeige();
}
function zeige() {
  anzeige. = n;
}
Der Ereignisname ist Text, die Funktion wird als Name ohne Klammern und ohne Anführungszeichen übergeben. Die Hilfsfunktion zeige verhindert doppelten Code.
Ansatz: Welche Teile sind Text, welche Namen?
Weiter: Die Anzeige ist ein normales Element, kein Eingabefeld.
A10
Der Listener hängt sich an
AFB III Trick
let n = 0;
knopf.addEventListener("click", klick);
function klick() {
  n = n + 1;
  knopf.addEventListener("click", klick);
}

Jemand klickt dreimal. Bestimme den Wert von n.

Rechne selbst und trage das Ergebnis ein — Enter prüft direkt.
Man könnte denken, jeder Klick hängt einen weiteren Zuhörer an und der Zähler wächst immer schneller. Aber: Dieselbe Funktion für dasselbe Ereignis wird am selben Element nur einmal registriert — weitere Aufrufe werden ignoriert. Also 1, 2, 3.
Ansatz: Wird wirklich jedes Mal ein neuer Zuhörer angehängt?
Weiter: Es ist jedes Mal dieselbe Funktion für dasselbe Ereignis.