Auf Klicks reagieren

Bisher haben deine Skripte alles auf einmal getan, wenn die Seite geladen wurde. Aber eine Seite wird interaktiv, wenn sie darauf reagiert, was der Nutzer tut. Dinge, die auf einer Seite passieren, wie ein Klick, ein Tastendruck oder das Tippen in ein Feld, heißen Ereignisse (englisch events).

Ein Button ist das Element button, zum Beispiel <button id="hallo">Hallo sagen</button>. Damit er etwas tut, sagst du ihm, welche Funktion er beim Klick ausführen soll:

const halloButton = document.querySelector("#hallo");
const nachricht = document.querySelector("#nachricht");

halloButton.addEventListener("click", function () {
    nachricht.textContent = "Hallo!";
});

Die Methode addEventListener() nimmt zwei Argumente entgegen: den Namen des Ereignisses in Anführungszeichen ("click") und eine Funktion. Die Funktion hat hier keinen Namen; sie steht genau dort, wo sie gebraucht wird. Achte darauf, wie der Code endet: } schließt die Funktion, ) schließt die Klammern von addEventListener(, und dann kommt das Semikolon.

Wenn die Seite geladen wird, übergibt das Skript die Funktion nur an den Button; es führt sie nicht aus. Die Funktion läuft später, jedes Mal, wenn jemand auf den Button klickt: beim ersten Klick, beim zweiten und so weiter. Eine solche Funktion heißt Ereignishandler (englisch event handler).

Der Handler kann auch eine Pfeilfunktion sein:

halloButton.addEventListener("click", () => {
    nachricht.textContent = "Hallo!";
});

Oder eine Funktion, die du vorher definiert hast und mit ihrem Namen übergibst:

function sageHallo() {
    nachricht.textContent = "Hallo!";
}

halloButton.addEventListener("click", sageHallo);

Achte auf einen typischen Fehler: addEventListener("click", sageHallo()). Mit den Klammern wird sageHallo() sofort aufgerufen, wenn die Seite geladen wird, und addEventListener() bekommt das, was die Funktion zurückgegeben hat (undefined), statt der Funktion. Es gibt keinen Fehler, aber die Nachricht erscheint, bevor jemand klickt, und ein Klick bewirkt nichts. Übergib die Funktion ohne Klammern: Der Browser ruft sie bei jedem Klick selbst auf.