Events auf mehreren Elementen

Oft brauchst du denselben Klick-Handler nicht nur für einen Button, sondern für viele – zum Beispiel in einem Menü oder einer Button-Gruppe. Statt jeden Listener einzeln zu schreiben, holst du alle Elemente und gehst sie in einer Schleife durch.

querySelectorAll() verwenden

Mit querySelectorAll() findest du alle Elemente, die zu einem Selektor passen – zum Beispiel alle Buttons mit der Klasse btn.

Das Ergebnis ist eine Liste (NodeList). Darüber kannst du später mit forEach() laufen.

1<button class="btn">Eins</button>
2<button class="btn">Zwei</button>
3<button class="btn">Drei</button>

1const buttons = document.querySelectorAll(".btn");
2
3console.log(buttons.length); // 3

Event Listener mit forEach() hinzufügen

Mit forEach() gehst du die Liste Element für Element durch. In jedem Durchlauf hängst du denselben Event Listener an.

So schreibst du den Code nur einmal – egal ob du 3 oder 30 Buttons hast.

1<button class="btn">Button A</button>
2<button class="btn">Button B</button>
3<button class="btn">Button C</button>

1const buttons = document.querySelectorAll(".btn");
2
3buttons.forEach(function(button) {
4    button.addEventListener("click", function() {
5        console.log("Button wurde geklickt");
6    });
7});

Das angeklickte Element erkennen

Wenn viele Buttons denselben Listener-Code nutzen, willst du wissen: Welcher wurde geklickt?

Dafür nimmst du das Event-Objekt entgegen. event.targetist genau das Element, auf das geklickt wurde – z. B. der Button-Text über event.target.textContent.

1<button class="farbe">Rot</button>
2<button class="farbe">Grün</button>
3<button class="farbe">Blau</button>

1const buttons = document.querySelectorAll(".farbe");
2
3buttons.forEach(function(button) {
4    button.addEventListener("click", function(event) {
5        console.log("Angeklickt:", event.target.textContent);
6    });
7});

Mehrere Buttons steuern

Ein typisches Muster: Nur ein Button soll gleichzeitig aktiv sein – wie in einer Navigation. Beim Klick entfernst du zuerst bei allen die Klasse aktiv, und setzt sie danach nur auf den geklickten Button.

1<button class="nav-btn">Start</button>
2<button class="nav-btn">Kurse</button>
3<button class="nav-btn">Kontakt</button>

1.nav-btn.aktiv {
2    background-color: #1557b0;
3    color: white;
4}

1const buttons = document.querySelectorAll(".nav-btn");
2
3buttons.forEach(function(button) {
4    button.addEventListener("click", function() {
5        buttons.forEach(function(btn) {
6            btn.classList.remove("aktiv");
7        });
8
9        button.classList.add("aktiv");
10    });
11});

Merksatz: Viele Elemente mit querySelectorAll() holen, mit forEach() Listener setzen und mit event.target das angeklickte Element erkennen.