01 Ereignisse sauber mit JavaScript verbinden

Orientierung

Was brauchst du als Basiswissen?

Du kannst Funktionen schreiben, Elemente mit `getElementById` auswählen und mit onclick u.ä. EventHandler anbinden.

Worum geht es?

Angaben wie `onclick="..."` vermischen HTML und JavaScript. Mit `addEventListener` bleibt im HTML stehen, was es gibt, und in JavaScript, wie sich die Seite verhält. Dabei lernen wir auch das Ereignisobjekt `event` kennen.

Was ist das Ziel?

Du kannst JavaScript in eine externe Datei auslagern, Ereignisbehandlungen registrieren und Informationen über ein Ereignis auswerten.

Erarbeitung

Theorie

Zum Nachlesen: Von getElementById zu querySelector

Bisher wurde ein Element über seine ID ausgewählt:

const start1 = document.getElementById("start");

Das ist weiterhin richtig. `querySelector` kann dasselbe Element mithilfe eines CSS-Selektors auswählen:

const start2 = document.querySelector("#start");

Beide Variablen enthalten nun dasselbe Element. Das `#` gehört zum CSS-Selektor für eine ID. Bei einer Klasse wird wie in CSS ein Punkt verwendet:

const ersterKnopf = document.querySelector(".stufe");

`querySelector` liefert nur das erste passende Element. Sollen alle passenden Elemente ausgewählt werden, verwendet man `querySelectorAll`:

const alleKnoepfe = document.querySelectorAll(".stufe");

Einstiegsaufgaben

Vergleiche:

<button onclick="starten()">Start</button>

und

knopf.addEventListener("click", starten);

Aufgabe 1

Wo steht jeweils der Ereignisname?

Aufgabe 2

Warum fehlen hinter `starten` im zweiten Beispiel die Klammern?

Aufgabe 3

Welche Variante trennt HTML und JavaScript besser?

Größere Aufgabe: Klicktrainer

Speichere alle drei Dateien in demselben Ordner:

HTML-Startdatei

Stylesheet

JavaScript

Aufgabe 4

Füge nun den EventListener über die JS-Datei hinzu. Entferne dazu onclick in HTML.

Aufgabe 5

Wiederhole dies bei "zurücksetzen".

Beim Klicktrainer wird das Feld mit dem Startbutton grün. Nur Klicks auf das grüne Feld zählen als Treffer. Solange das Feld rot ist, werden Klicks ignoriert. Alternativ kann die Leertaste verwendet werden. Der Zurücksetzen-Button stellt die Trefferzahl auf 0 und das Feld wieder auf Rot.

Aufgabe 6

Lege eine Variable an, welche die Punkte zählt.

Aufgabe 7

Gib dem Feld in der Mitte einen Eventhandler für click. Lege dazu die Funktion an.

Aufgabe 8

Lasse in der Funktion die Variable hochzählen. Gib diese zum Testen erst einmal in der Konsole (console.log) aus.

Aufgabe 9

Gib dem Anzeige-Textfeld (ID "anzeige") den neuen Text mit aktualisierter Trefferzahl.

Aufgabe 10

Setze beim Zurücksetzen die Variable auf 0.

Aufgabe 11

Das funktioniert immer noch nicht perfekt, denn du kannst auch zählen, wenn das Feld rot ist. Lege eine zweite Variable an, die mit 0 oder 1 bzw. true oder false anzeigt, in welchem Modus du bist. Damit soll gezählt werden, ob das Anklicken gezählt werden darf.

Aufgaben zur Fehlersuche

Aufgabe 12

Erkläre den Fehler und verbessere den Code:

start.addEventListener("onclick", starten);

start.addEventListener("click", starten());

document.querySelector("start");

Rück- und Ausblick

Was muss man wissen/können?

Eine externe JavaScript-Datei wird mit `src` eingebunden. `getElementById` sucht gezielt nach einer ID. `querySelector` verwendet einen CSS-Selektor und `querySelectorAll` wählt alle passenden Elemente aus. `addEventListener` verbindet ein Element mit einer Funktion, ohne JavaScript in das HTML-Element zu schreiben. Das Ereignisobjekt liefert zusätzliche Informationen.

Was können anschließende Themen sein?

Mit Schleifen können wir als Nächstes viele ähnliche Elemente erzeugen, ohne Code immer wieder zu kopieren.