Ein Klickzähler

Ein Handler muss sich oft etwas von einem Klick bis zum nächsten merken, zum Beispiel, wie oft ein Button angeklickt wurde. Die Seite zeigt Dinge an, aber es sind die Variablen deines Programms, die sie sich merken. Hier ist ein Zähler für die Gläser Wasser, die du heute getrunken hast:

const anzahlText = document.querySelector("#anzahl");
const trinkenButton = document.querySelector("#trinken");

let glaeser = 0;

trinkenButton.addEventListener("click", function () {
    glaeser++;
    anzahlText.textContent = glaeser;
});

Bei jedem Klick ändert der Handler zuerst die Variable und zeigt dann ihren neuen Wert auf der Seite an. textContent macht aus der Zahl von selbst einen Text.

Die Variable wird mit let erstellt, weil sich ihr Wert ändert, und zwar außerhalb der Funktion. Warum nicht innerhalb? Eine Variable, die in einer Funktion erstellt wird, existiert nur, solange die Funktion läuft, und jeder Klick führt die Funktion neu aus. Mit let glaeser = 0; im Handler würde jeder Klick wieder bei 0 beginnen, und die Seite würde für immer 1 anzeigen.

Merke dir dieses Muster, denn du wirst es ständig benutzen: Die Daten leben in Variablen. Wenn etwas passiert, ändere die Variablen und zeige sie dann auf der Seite an.