Webseiten interaktiv machen

Zum Abschluss verbindest du JavaScript mit sichtbaren Elementen einer Webseite. Du wählst HTML-Elemente aus, veränderst Texte und Klassen und reagierst auf Klicks oder Eingaben. In einem kleinen Praxisprojekt setzt du die bisherigen Grundlagen zu einer interaktiven Anwendung zusammen.

Das DOM verstehen
Elemente mit `querySelector()` auswählen
Inhalte und CSS-Klassen ändern
Ereignisse mit `addEventListener()`

Das DOM verstehen

Lernziel

Nach dieser Lektion weißt du, was das DOM ist und warum JavaScript damit sichtbare Inhalte einer Webseite lesen und verändern kann. Du verstehst außerdem, dass eine HTML-Seite im Browser als Baumstruktur dargestellt wird.

Was bedeutet DOM?

DOM steht für Document Object Model, auf Deutsch etwa: „Dokument-Objekt-Modell“.

Wenn der Browser eine HTML-Datei lädt, liest er deren Elemente ein und erstellt daraus eine Struktur im Speicher. Diese Struktur nennt man DOM. JavaScript kann auf sie zugreifen.

Aus diesem HTML-Code:

<body>
  <h1>Willkommen</h1>
  <p>JavaScript macht Webseiten interaktiv.</p>
</body>

entsteht gedanklich eine Baumstruktur:

document
└── html
    ├── head
    └── body
        ├── h1
        └── p

Jedes HTML-Element wird dabei zu einem Objekt im DOM. JavaScript kann diese Objekte untersuchen, verändern, hinzufügen oder entfernen.

Merke: HTML beschreibt den ursprünglichen Aufbau der Seite. Das DOM ist die Version dieser Seite, mit der der Browser und JavaScript gerade arbeiten.

Das globale Objekt `document`

JavaScript erhält über das Objekt document Zugriff auf die geladene Webseite.

console.log(document);

Gib diesen Befehl in der Browser-Konsole ein. Du siehst die Struktur des aktuellen Dokuments.

document steht für die gesamte HTML-Seite. Es enthält unter anderem:

das <html>-Element,
den Bereich <head>,
den sichtbaren Bereich <body>,
alle Überschriften, Absätze, Bilder, Buttons und Formulare.

Du kannst beispielsweise den Seitentitel auslesen:

console.log(document.title);

Der Titel stammt aus dem <title>-Element im <head>:

<head>
  <title>Meine erste Webseite</title>
</head>

Ändere nun den Titel per JavaScript:

document.title = "JavaScript üben";

Im Browser-Tab erscheint sofort der neue Titel.

HTML und DOM sind nicht ganz dasselbe

HTML ist der Code, den du in einer Datei schreibst:

<p>Hallo!</p>

Das DOM entsteht daraus erst, wenn der Browser die Datei verarbeitet. JavaScript verändert normalerweise das DOM — nicht direkt die gespeicherte HTML-Datei.

Schau dir dieses Beispiel an:

<h1 id="ueberschrift">Willkommen</h1>

Wenn JavaScript später den Text verändert, sieht die Seite anders aus. Die ursprüngliche HTML-Datei auf deinem Computer bleibt jedoch unverändert.

document.querySelector("#ueberschrift").textContent = "Schön, dass du da bist!";

Nach dem Neuladen der Seite wird wieder der ursprüngliche HTML-Code geladen, sofern du die HTML-Datei nicht selbst gespeichert und geändert hast.

Elemente, Attribute und Inhalte

HTML-Elemente bestehen häufig aus mehreren Teilen:

<a href="https://example.com" class="link">Mehr erfahren</a>

Teil	Bedeutung
`<a>`	Das Element beziehungsweise der Elementtyp
`href`	Ein Attribut mit dem Ziel des Links
`class`	Ein Attribut für CSS oder JavaScript
`Mehr erfahren`	Der Textinhalt des Elements

Im DOM kann JavaScript all diese Informationen lesen und später verändern.

Zum Beispiel hat ein Button einen Text und eine CSS-Klasse:

<button class="kaufen-button">Jetzt kaufen</button>

JavaScript könnte später:

den Text in „Bestellt“ ändern,
eine Klasse ergänzen,
den Button deaktivieren,
auf einen Klick reagieren.

Wie du einzelne Elemente gezielt auswählst und veränderst, lernst du in den nächsten Lektionen.

Die Seite im Browser untersuchen

Die Entwicklerwerkzeuge des Browsers helfen dir, das DOM sichtbar zu machen.

Öffne eine Webseite im Browser.
Drücke F12 oder klicke mit der rechten Maustaste auf ein Element.
Wähle „Untersuchen“ oder „Element untersuchen“.
Öffne den Bereich Elements oder Elemente.

Dort zeigt der Browser die aktuelle DOM-Struktur an. Klappst du Elemente auf, erkennst du ihre Verschachtelung.

Angenommen, deine Seite enthält:

<main>
  <h1>Meine Aufgaben</h1>
  <ul>
    <li>Einkaufen</li>
    <li>JavaScript lernen</li>
  </ul>
</main>

Dann liegt das <h1>-Element innerhalb von <main>. Die beiden <li>-Elemente liegen innerhalb der Liste <ul>.

Diese Beziehungen sind wichtig:

<main> ist das Elternelement von <h1> und <ul>.
<h1> und <ul> sind Kindelemente von <main>.
Die beiden <li>-Elemente sind Kindelemente von <ul>.
Die <li>-Elemente sind zueinander Geschwisterelemente.

Warum die Baumstruktur wichtig ist

Die Baumstruktur bestimmt, welche Elemente zu welchem Bereich gehören. Das ist besonders bei größeren Webseiten hilfreich.

<section class="produkt">
  <h2>Rucksack</h2>
  <p>Praktisch für Alltag und Reise.</p>
  <button>In den Warenkorb</button>
</section>

Der Button gehört hier zu einem bestimmten Produktbereich. Eine interaktive Webseite soll später beispielsweise genau diesen Bereich aktualisieren, wenn jemand auf den Button klickt.

Das DOM erlaubt JavaScript, solche Zusammenhänge zu erkennen und gezielt zu nutzen.

Ein erstes vollständiges Beispiel

Lege eine Datei namens index.html an:

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>DOM-Beispiel</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Meine Lernseite</h1>
    <p>Ich lerne das DOM kennen.</p>
  </body>
</html>

Erstelle daneben die Datei script.js:

console.log(document);
console.log(document.title);
console.log(document.body);

Öffne anschließend die HTML-Datei im Browser und rufe die Konsole auf.

Du solltest Folgendes beobachten:

document repräsentiert das gesamte Dokument.
document.title gibt den Seitentitel aus.
document.body gibt den sichtbaren Inhaltsbereich aus.

Das Attribut defer im <script>-Element ist hier wichtig:

<script src="script.js" defer></script>

Es sorgt dafür, dass der Browser zuerst das HTML verarbeitet und das JavaScript danach ausführt. So steht das DOM bereit, wenn dein Skript darauf zugreift.

Veränderungen im DOM beobachten

Öffne in den Entwicklerwerkzeugen den Bereich Elements. Gib danach in der Konsole diesen Code ein:

document.body.style.backgroundColor = "lightblue";

Die Hintergrundfarbe der Seite ändert sich sofort. Im Bereich „Elements“ kannst du sehen, dass der Browser eine Stilinformation zum <body>-Element ergänzt hat.

Du hast damit das DOM zur Laufzeit verändert.

Lade die Seite neu. Die Farbe verschwindet wieder, denn die Änderung war nur im aktuellen DOM vorhanden und wurde nicht in deine HTML-Datei geschrieben.

Wichtig: Änderungen durch JavaScript bleiben normalerweise nur bestehen, bis die Seite neu geladen wird.

Zusammenfassung

Das DOM ist die Objektstruktur einer geladenen HTML-Seite im Browser.
JavaScript greift über document auf diese Struktur zu.
HTML-Elemente bilden im DOM eine Baumstruktur aus Eltern-, Kind- und Geschwisterelementen.
Über das DOM kann JavaScript Inhalte, Attribute, Klassen und Styles verändern.
Die Entwicklerwerkzeuge zeigen dir die aktuelle DOM-Struktur.
Mit defer wird dein JavaScript ausgeführt, nachdem der Browser das HTML verarbeitet hat.

Übungen

1. Das Dokument erkunden

Öffne eine beliebige Webseite und gib in der Konsole diese Befehle ein:

console.log(document);
console.log(document.title);
console.log(document.body);

Frage: Was geben die drei Befehle jeweils aus?

2. Den Seitentitel ändern

Erstelle eine HTML-Seite mit einem <title>-Element. Ändere den Titel in deiner JavaScript-Datei:

document.title = "Mein DOM-Training";

Aufgabe: Beobachte, wo sich der Titel im Browser ändert.

3. Die Baumstruktur erkennen

Betrachte diesen HTML-Code:

<article>
  <h2>Neuigkeiten</h2>
  <p>Heute beginnt das JavaScript-Training.</p>
  <p>Viel Erfolg beim Lernen!</p>
</article>

Fragen:

Welches Element ist das Elternelement der beiden Absätze?
Welche Elemente sind Geschwister?
Welches Element enthält den Text „Neuigkeiten“?

Lösungen:

Das <article>-Element ist das Elternelement der Absätze.
<h2> sowie beide <p>-Elemente sind Geschwister, weil sie direkt innerhalb von <article> liegen.
Das <h2>-Element enthält den Text „Neuigkeiten“.

Im nächsten Schritt lernst du, wie du einzelne Elemente aus diesem DOM gezielt mit querySelector() auswählst.

Elemente mit `querySelector()` auswählen

Elemente gezielt auswählen

Damit JavaScript etwas auf einer Webseite verändern kann, muss es zuerst das passende HTML-Element finden. Dafür verwenden wir häufig:

document.querySelector()

querySelector() durchsucht die HTML-Seite und gibt das erste Element zurück, das zu einem CSS-Selektor passt.

Die Schreibweise kennst du vielleicht schon aus CSS: Elemente können über ihren Namen, ihre Klasse oder ihre ID ausgewählt werden.

Ein einfaches HTML-Beispiel

Stell dir vor, deine Webseite enthält diesen Code:

<h1>Willkommen</h1>

<p class="hinweis">Bitte wähle eine Farbe aus.</p>

<button id="start-button">Starten</button>

JavaScript kann nun auf diese Elemente zugreifen.

const ueberschrift = document.querySelector("h1");
const hinweis = document.querySelector(".hinweis");
const startButton = document.querySelector("#start-button");

Die drei Variablen enthalten danach jeweils ein HTML-Element:

ueberschrift verweist auf das erste <h1>-Element.
hinweis verweist auf das Element mit der Klasse hinweis.
startButton verweist auf das Element mit der ID start-button.

Merke: document steht für die gesamte HTML-Seite, die gerade im Browser geöffnet ist.

Auswahl über den Elementnamen

Du kannst ein Element direkt über seinen HTML-Tag auswählen.

<p>Das ist ein Absatz.</p>

const absatz = document.querySelector("p");

console.log(absatz);

In der Browser-Konsole wird das gefundene <p>-Element angezeigt.

Wenn mehrere Absätze vorhanden sind, wird nur der erste gefunden:

<p>Erster Absatz</p>
<p>Zweiter Absatz</p>

const absatz = document.querySelector("p");

console.log(absatz);

Das Ergebnis ist:

<p>Erster Absatz</p>

Auswahl über eine CSS-Klasse

Klassen beginnen in CSS und JavaScript mit einem Punkt ..

<p class="wichtig">Diese Information ist wichtig.</p>

const wichtigeInfo = document.querySelector(".wichtig");

console.log(wichtigeInfo);

Hier bedeutet .wichtig: „Suche ein Element mit der Klasse wichtig.“

Ein Element darf mehrere Klassen besitzen:

<p class="hinweis wichtig">Bitte beachte die Regeln.</p>

Du kannst es weiterhin über eine einzelne Klasse auswählen:

const text = document.querySelector(".wichtig");

Oder du verlangst, dass beide Klassen vorhanden sind:

const text = document.querySelector(".hinweis.wichtig");

Zwischen .hinweis und .wichtig steht kein Leerzeichen. Das bedeutet: Dasselbe Element muss beide Klassen haben.

Auswahl über eine ID

Eine ID beginnt mit einer Raute #.

<button id="speichern">Speichern</button>

const speichernButton = document.querySelector("#speichern");

IDs sollten auf einer Webseite nur einmal vorkommen. Deshalb eignen sie sich besonders gut für eindeutige Elemente, etwa einen bestimmten Button oder ein Eingabefeld.

<input id="benutzername" type="text">

const eingabeFeld = document.querySelector("#benutzername");

Auswahl genauer beschreiben

CSS-Selektoren können genauer festlegen, welches Element gesucht wird.

Element mit einer bestimmten Klasse

<p class="meldung">Eine Nachricht</p>
<div class="meldung">Ein Bereich</div>

const absatzMeldung = document.querySelector("p.meldung");

Dieser Selektor sucht nur nach einem <p>-Element mit der Klasse meldung.

Ein Element innerhalb eines anderen Elements

<section class="profil">
  <h2>Mein Profil</h2>
  <p>Angemeldet als Lea.</p>
</section>

const profilTitel = document.querySelector(".profil h2");

Das Leerzeichen bedeutet: „Suche ein <h2> innerhalb eines Elements mit der Klasse profil.“

Ein bestimmtes Eingabefeld

<input type="email" id="email">
<input type="password" id="passwort">

const emailFeld = document.querySelector('input[type="email"]');

Solche Attribut-Selektoren sind nützlich, aber für den Einstieg reichen oft Klassen und IDs aus.

Das ausgewählte Element verwenden

Nach der Auswahl kannst du Eigenschaften des Elements lesen oder verändern.

<h1 id="titel">Hallo!</h1>

const titel = document.querySelector("#titel");

console.log(titel.textContent);

Die Konsole zeigt:

Hallo!

textContent enthält den Text eines Elements. Du kannst ihn auch ändern:

titel.textContent = "Willkommen auf meiner Webseite!";

Nach dieser Zeile wird der sichtbare Text der Überschrift auf der Webseite geändert.

Beispiel: Einen Button auswählen

In diesem Beispiel wird ein Button ausgewählt und in der Konsole ausgegeben.

<button class="farbe-button">Farbe ändern</button>

const farbeButton = document.querySelector(".farbe-button");

console.log(farbeButton);

Wichtig ist die Reihenfolge:

Das HTML-Element muss auf der Seite vorhanden sein.
JavaScript sucht das Element mit querySelector().
Die Variable speichert den Verweis auf dieses Element.
Danach kann JavaScript damit arbeiten.

Was passiert, wenn kein Element gefunden wird?

Wenn der Selektor zu keinem Element passt, liefert querySelector() den Wert null.

const nichtVorhanden = document.querySelector(".gibt-es-nicht");

console.log(nichtVorhanden);

Ausgabe:

null

Das bedeutet: JavaScript hat kein passendes Element gefunden.

Wenn du anschließend versuchst, dieses nicht vorhandene Element zu verändern, entsteht ein Fehler:

const nichtVorhanden = document.querySelector(".gibt-es-nicht");

nichtVorhanden.textContent = "Hallo";

Typischerweise erscheint dann in der Konsole eine Fehlermeldung wie:

Cannot set properties of null

Prüfe deshalb bei Fehlern immer:

Ist der Klassenname korrekt geschrieben?
Fehlt der Punkt . vor einer Klasse?
Fehlt die Raute # vor einer ID?
Existiert das Element wirklich im HTML?
Wird das JavaScript vielleicht ausgeführt, bevor das HTML geladen wurde?

JavaScript erst nach dem HTML laden

Wenn JavaScript zu früh ausgeführt wird, existieren die HTML-Elemente möglicherweise noch nicht. Dann kann querySelector() sie nicht finden.

Eine einfache Lösung: Binde die JavaScript-Datei am Ende des <body> ein.

<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine Seite</title>
  </head>
  <body>
    <h1 id="titel">Hallo!</h1>

    <script src="script.js"></script>
  </body>
</html>

Wenn script.js geladen wird, wurde die Überschrift bereits vom Browser erstellt. Die Auswahl funktioniert dann:

const titel = document.querySelector("#titel");
titel.textContent = "JavaScript funktioniert!";

Alternativ kannst du das Attribut defer im <head> verwenden:

<script src="script.js" defer></script>

Mit defer wartet der Browser mit der Ausführung von JavaScript, bis das HTML vollständig eingelesen wurde.

`querySelector()` und `querySelectorAll()`

querySelector() liefert immer nur das erste passende Element.

<li class="aufgabe">HTML lernen</li>
<li class="aufgabe">JavaScript lernen</li>
<li class="aufgabe">Projekt bauen</li>

const ersteAufgabe = document.querySelector(".aufgabe");

console.log(ersteAufgabe.textContent);

Ausgabe:

HTML lernen

Wenn du alle passenden Elemente benötigst, gibt es document.querySelectorAll():

const alleAufgaben = document.querySelectorAll(".aufgabe");

console.log(alleAufgaben);

Das Ergebnis ist eine Sammlung aller Elemente mit der Klasse aufgabe.

Du kannst mit einem Index auf ein bestimmtes Element zugreifen:

console.log(alleAufgaben[0].textContent);
console.log(alleAufgaben[1].textContent);
console.log(alleAufgaben[2].textContent);

Für viele gleichartige Elemente ist querySelectorAll() später besonders nützlich. Für einzelne Überschriften, Buttons oder Eingabefelder verwendest du meist querySelector().

Häufige Fehler

Fehler	Ursache	Richtige Schreibweise
`document.querySelector("hinweis")`	Der Punkt für eine Klasse fehlt.	`document.querySelector(".hinweis")`
`document.querySelector("start-button")`	Die Raute für eine ID fehlt.	`document.querySelector("#start-button")`
`document.querySelector("#Start-Button")`	Groß- und Kleinschreibung stimmen nicht überein.	`document.querySelector("#start-button")`
`document.querySelector(".button")`	Die Klasse existiert nicht im HTML.	HTML und JavaScript vergleichen
`document.querySelector(".karte")`	Mehrere Karten existieren, aber nur die erste wird gefunden.	Bei Bedarf `querySelectorAll(".karte")` verwenden

Klassen- und ID-Namen müssen exakt übereinstimmen. start-button ist nicht dasselbe wie startButton oder Start-Button.

Vollständiges Mini-Beispiel

Die folgende Seite wählt eine Überschrift, einen Hinweistext und einen Button aus.

<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>querySelector üben</title>
  </head>
  <body>
    <h1 id="seiten-titel">Willkommen</h1>

    <p class="hinweis">
      Klicke später auf den Button.
    </p>

    <button id="weiter-button">Weiter</button>

    <script src="script.js"></script>
  </body>
</html>

const titel = document.querySelector("#seiten-titel");
const hinweis = document.querySelector(".hinweis");
const weiterButton = document.querySelector("#weiter-button");

console.log(titel.textContent);
console.log(hinweis.textContent);
console.log(weiterButton.textContent);

In der Konsole erscheinen die Texte der drei gefundenen Elemente.

Merksatz

Mit document.querySelector() findest du das erste HTML-Element, das zu einem CSS-Selektor passt.

Die wichtigsten Selektoren für den Anfang sind:

document.querySelector("p");         // Elementname
document.querySelector(".hinweis");  // Klasse
document.querySelector("#menu");     // ID

Im nächsten Schritt kannst du die gefundenen Elemente verändern: Texte austauschen, CSS-Klassen hinzufügen oder entfernen und auf Klicks reagieren.

Inhalte und CSS-Klassen ändern

Lernziele

Auf dieser Seite lernst du, wie du mit JavaScript sichtbare Inhalte einer Webseite veränderst. Danach kannst du:

Text in HTML-Elementen austauschen
HTML-Inhalte gezielt einfügen
CSS-Klassen hinzufügen, entfernen und umschalten
den Zustand eines Elements prüfen
eine kleine interaktive Oberfläche bauen

Inhalte mit `textContent` ändern

Nachdem du ein Element mit querySelector() ausgewählt hast, kannst du seinen Text über die Eigenschaft textContent lesen oder verändern.

<p class="nachricht">Willkommen!</p>
<button class="aendern-button">Text ändern</button>

const nachricht = document.querySelector(".nachricht");
const aendernButton = document.querySelector(".aendern-button");

aendernButton.addEventListener("click", function () {
  nachricht.textContent = "Der Text wurde geändert.";
});

Beim Klick auf den Button wird der bisherige Inhalt des Absatzes ersetzt.

Merke: textContent behandelt seinen Inhalt als reinen Text. HTML-Tags werden dabei nicht als HTML ausgeführt.

nachricht.textContent = "<strong>Hallo</strong>";

Im Browser erscheint dann tatsächlich:

<strong>Hallo</strong>

Das ist oft sinnvoll, weil Inhalte auf diese Weise sicher als Text ausgegeben werden.

Inhalte mit `innerHTML` ändern

Mit innerHTML kannst du nicht nur Text, sondern auch HTML-Code in ein Element einsetzen.

<p class="info"></p>

const info = document.querySelector(".info");

info.innerHTML = "Heute ist <strong>ein guter Tag</strong>.";

Das Ergebnis im Browser lautet:

Heute ist ein guter Tag.

Auch Listen oder mehrere Elemente lassen sich einsetzen:

info.innerHTML = `
  <h2>Aufgaben</h2>
  <ul>
    <li>JavaScript üben</li>
    <li>Code testen</li>
  </ul>
`;

Wann verwende ich was?

Eigenschaft	Geeignet für	Beispiel
`textContent`	normalen Text	Überschriften, Meldungen, Zahlen
`innerHTML`	HTML-Strukturen	Listen, Links, hervorgehobene Inhalte

Verwende textContent, wenn du nur Text ändern möchtest. Es ist einfacher und sicherer.

Mit innerHTML solltest du besonders vorsichtig sein, wenn Inhalte von Nutzerinnen und Nutzern stammen. Ungeprüfte Eingaben können unerwünschten HTML- oder JavaScript-Code enthalten.

CSS-Klassen mit `classList` verändern

CSS-Klassen bestimmen häufig das Aussehen eines Elements. JavaScript kann diese Klassen dynamisch ändern.

Betrachte zunächst dieses HTML:

<p class="status">Die Lampe ist aus.</p>
<button class="licht-button">Licht einschalten</button>

Und dieses CSS:

.status {
  padding: 12px;
  background-color: #eeeeee;
  color: #222222;
}

.an {
  background-color: #fff3a3;
  color: #7a4b00;
  font-weight: bold;
}

Die Klasse status sorgt für das normale Aussehen. Die Klasse an soll zusätzlich erscheinen, wenn die Lampe eingeschaltet ist.

Eine Klasse hinzufügen: `classList.add()`

Mit classList.add() fügst du einem Element eine CSS-Klasse hinzu.

const status = document.querySelector(".status");

status.classList.add("an");

Danach hat der Absatz beide Klassen:

<p class="status an">Die Lampe ist aus.</p>

Die CSS-Regeln von .an werden nun angewendet.

Du kannst auch mehrere Klassen gleichzeitig hinzufügen:

status.classList.add("an", "hervorgehoben");

Eine Klasse entfernen: `classList.remove()`

Mit classList.remove() entfernst du eine Klasse wieder.

status.classList.remove("an");

Das Element besitzt anschließend nur noch die Klasse status.

Auch hier sind mehrere Klassen möglich:

status.classList.remove("an", "hervorgehoben");

Eine Klasse umschalten: `classList.toggle()`

Besonders praktisch ist classList.toggle(). Die Methode prüft automatisch:

Ist die Klasse noch nicht vorhanden? Dann wird sie hinzugefügt.
Ist die Klasse schon vorhanden? Dann wird sie entfernt.

status.classList.toggle("an");

Damit eignet sich toggle() hervorragend für Schalter, Menüs, Akkordeons oder einen Dark Mode.

Beispiel: Dunklen Modus umschalten

<button class="modus-button">Dunklen Modus umschalten</button>

<main class="seite">
  <h2>Meine Webseite</h2>
  <p>Dieser Bereich kann sein Aussehen ändern.</p>
</main>

.seite {
  padding: 24px;
  background-color: white;
  color: #222222;
}

.dunkel {
  background-color: #222222;
  color: white;
}

const modusButton = document.querySelector(".modus-button");
const seite = document.querySelector(".seite");

modusButton.addEventListener("click", function () {
  seite.classList.toggle("dunkel");
});

Bei jedem Klick wird die Klasse dunkel hinzugefügt oder wieder entfernt.

Prüfen, ob eine Klasse vorhanden ist

Mit classList.contains() kannst du herausfinden, ob ein Element eine bestimmte Klasse besitzt.

const dunkelAktiv = seite.classList.contains("dunkel");

console.log(dunkelAktiv);

Das Ergebnis ist entweder true oder false.

Diese Prüfung ist nützlich, wenn sich nicht nur das Aussehen, sondern auch ein Text ändern soll.

modusButton.addEventListener("click", function () {
  seite.classList.toggle("dunkel");

  if (seite.classList.contains("dunkel")) {
    modusButton.textContent = "Hellen Modus einschalten";
  } else {
    modusButton.textContent = "Dunklen Modus einschalten";
  }
});

Nun passt der Buttontext immer zum aktuellen Zustand.

Praxisbeispiel: Eine Hinweisbox ein- und ausblenden

In diesem Beispiel wird ein Hinweis zunächst verborgen. Ein Klick auf den Button zeigt ihn an. Beim nächsten Klick wird er wieder ausgeblendet.

HTML

<button class="hinweis-button">Hinweis anzeigen</button>

<p class="hinweis versteckt">
  JavaScript wird direkt im Browser ausgeführt.
</p>

CSS

.hinweis {
  margin-top: 16px;
  padding: 12px;
  border-left: 4px solid #2c7a7b;
  background-color: #e6fffa;
}

.versteckt {
  display: none;
}

JavaScript

const hinweisButton = document.querySelector(".hinweis-button");
const hinweis = document.querySelector(".hinweis");

hinweisButton.addEventListener("click", function () {
  hinweis.classList.toggle("versteckt");

  if (hinweis.classList.contains("versteckt")) {
    hinweisButton.textContent = "Hinweis anzeigen";
  } else {
    hinweisButton.textContent = "Hinweis ausblenden";
  }
});

Was passiert hier?

Der Absatz startet mit der Klasse versteckt.
Diese Klasse setzt display: none.
Beim Klick schaltet toggle("versteckt") die Klasse um.
contains("versteckt") prüft anschließend den neuen Zustand.
Der Buttontext wird passend angepasst.

✨ So entsteht eine einfache, aber echte Interaktion.

Alternative: Klassen vollständig ersetzen

Manchmal möchtest du die gesamte Klassenliste ersetzen. Dafür gibt es className.

const box = document.querySelector(".box");

box.className = "box erfolg";

Danach besitzt das Element genau die Klassen box und erfolg.

Diese Schreibweise ist möglich, aber classList ist in vielen Situationen besser lesbar und sicherer. Wenn du nur eine einzelne Klasse ändern möchtest, verwende daher meist:

box.classList.add("erfolg");

oder:

box.classList.remove("fehler");

Komplettes Beispiel: Richtige und falsche Antwort anzeigen

Dieses Beispiel verbindet Textänderungen und CSS-Klassen. Beim Klick auf einen Button erscheint eine Rückmeldung.

HTML

<h2>Kurze Frage</h2>
<p>Welche Sprache macht Webseiten interaktiv?</p>

<button class="antwort-button">JavaScript</button>
<button class="antwort-button">HTML</button>

<p class="rueckmeldung"></p>

CSS

.rueckmeldung {
  margin-top: 16px;
  padding: 12px;
  font-weight: bold;
}

.richtig {
  background-color: #d9f7df;
  color: #176b2c;
}

.falsch {
  background-color: #ffe0e0;
  color: #9b1c1c;
}

JavaScript

const antwortButtons = document.querySelectorAll(".antwort-button");
const rueckmeldung = document.querySelector(".rueckmeldung");

antwortButtons.forEach(function (button) {
  button.addEventListener("click", function () {
    rueckmeldung.classList.remove("richtig", "falsch");

    if (button.textContent === "JavaScript") {
      rueckmeldung.textContent = "Richtig! JavaScript macht Webseiten interaktiv.";
      rueckmeldung.classList.add("richtig");
    } else {
      rueckmeldung.textContent = "Noch nicht richtig. HTML beschreibt die Struktur einer Webseite.";
      rueckmeldung.classList.add("falsch");
    }
  });
});

Wichtige Beobachtungen

querySelectorAll() wählt beide Buttons aus.
forEach() richtet für jeden Button einen Klick-Listener ein.
Vor jeder neuen Rückmeldung werden die alten Klassen entfernt.
Die neue Rückmeldung erhält entweder die Klasse richtig oder falsch.

Ohne das vorherige remove() könnte eine Rückmeldung gleichzeitig beide Klassen besitzen. Das führt leicht zu widersprüchlichem CSS.

Häufige Fehler

Die Klasse wird ohne Punkt geschrieben

Bei querySelector() benötigst du für eine Klasse einen Punkt:

const box = document.querySelector(".box");

Bei classList.add() schreibst du den Klassennamen ohne Punkt:

box.classList.add("aktiv");

Das hier wäre falsch:

box.classList.add(".aktiv");

JavaScript findet das Element nicht

Wenn dieses Ergebnis erscheint:

Cannot read properties of null

wurde das Element wahrscheinlich nicht gefunden. Prüfe:

Ist der Klassenname im HTML korrekt?
Steht im Selektor ein Punkt vor dem Klassennamen?
Wird das JavaScript erst ausgeführt, nachdem das HTML geladen wurde?

Eine einfache Lösung ist, das <script>-Element am Ende des <body> einzubinden:

<body>
  <p class="nachricht">Hallo!</p>

  <script src="script.js"></script>
</body>

Dann existieren die HTML-Elemente bereits, wenn JavaScript gestartet wird.

Die alte Klasse bleibt erhalten

Wenn ein Element nur eine von zwei Zustandsklassen haben soll, entferne zuerst beide möglichen Klassen:

rueckmeldung.classList.remove("richtig", "falsch");

Danach fügst du die gewünschte Klasse hinzu:

rueckmeldung.classList.add("richtig");

Übung

Erstelle einen Button mit der Aufschrift „Details anzeigen“. Beim Klick soll ein Textabschnitt sichtbar werden. Der Button soll danach „Details ausblenden“ heißen. Beim nächsten Klick soll der Abschnitt wieder verschwinden.

Nutze dafür:

querySelector()
addEventListener()
classList.toggle()
classList.contains()
textContent

Mögliche Lösung

<button class="details-button">Details anzeigen</button>

<p class="details versteckt">
  Diese zusätzlichen Informationen sind zunächst verborgen.
</p>

.versteckt {
  display: none;
}

const detailsButton = document.querySelector(".details-button");
const details = document.querySelector(".details");

detailsButton.addEventListener("click", function () {
  details.classList.toggle("versteckt");

  if (details.classList.contains("versteckt")) {
    detailsButton.textContent = "Details anzeigen";
  } else {
    detailsButton.textContent = "Details ausblenden";
  }
});

Zusammenfassung

Mit JavaScript kannst du Inhalte und das Aussehen einer Webseite direkt verändern:

textContent setzt oder liest reinen Text.
innerHTML setzt HTML-Inhalte.
classList.add() fügt eine Klasse hinzu.
classList.remove() entfernt eine Klasse.
classList.toggle() schaltet eine Klasse ein oder aus.
classList.contains() prüft, ob eine Klasse vorhanden ist.

Damit hast du ein wichtiges Werkzeug für interaktive Webseiten: Du kannst auf Aktionen reagieren und sichtbares Feedback geben. Im nächsten Schritt lernst du, Ereignisse mit addEventListener() noch gezielter einzusetzen.

Ereignisse mit `addEventListener()`

Lernziele

Nach dieser Lektion kannst du:

auf Benutzeraktionen wie Klicks und Eingaben reagieren,
mit addEventListener() Ereignisse überwachen,
Funktionen als Reaktion auf Ereignisse ausführen,
Informationen über das Ereignis mit dem Event-Objekt nutzen,
typische Fehler beim Arbeiten mit Ereignissen vermeiden.

Was sind Ereignisse?

Eine Webseite reagiert nicht von allein auf Benutzerinnen und Benutzer. Erst durch JavaScript kann sie auf Aktionen eingehen.

Solche Aktionen heißen Ereignisse oder auf Englisch Events. Beispiele sind:

Ein Button wird angeklickt: click
Text wird in ein Eingabefeld geschrieben: input
Ein Formular wird abgeschickt: submit
Die Maus bewegt sich über ein Element: mouseover
Eine Taste wird gedrückt: keydown

Mit addEventListener() sagst du JavaScript:

„Wenn dieses Ereignis passiert, führe eine bestimmte Funktion aus.“

Die Grundstruktur von `addEventListener()`

Die Methode wird auf einem HTML-Element aufgerufen:

element.addEventListener("ereignis", funktion);

Dabei bedeutet:

element: Das ausgewählte HTML-Element, zum Beispiel ein Button.
"ereignis": Der Name des Ereignisses als String, zum Beispiel "click".
funktion: Der Code, der beim Ereignis ausgeführt werden soll.

Ein einfaches Beispiel:

const button = document.querySelector("button");

button.addEventListener("click", begruessen);

function begruessen() {
  console.log("Der Button wurde angeklickt.");
}

Sobald jemand auf den Button klickt, erscheint die Nachricht in der Browser-Konsole.

Ein Button reagiert auf einen Klick

Erstelle zunächst eine HTML-Datei mit einem Button und einem Absatz:

<button id="hallo-button">Begrüßung anzeigen</button>
<p id="ausgabe">Noch kein Klick.</p>

Nun wählst du beide Elemente mit JavaScript aus:

const halloButton = document.querySelector("#hallo-button");
const ausgabe = document.querySelector("#ausgabe");

Danach fügst du den Event Listener hinzu:

halloButton.addEventListener("click", zeigeBegruessung);

function zeigeBegruessung() {
  ausgabe.textContent = "Hallo! Schön, dass du da bist.";
}

Ablauf:

JavaScript sucht den Button über #hallo-button.
JavaScript wartet auf einen Klick auf diesen Button.
Beim Klick wird zeigeBegruessung() ausgeführt.
Der Text im Absatz wird verändert.

Funktion übergeben, nicht sofort aufrufen

Ein häufiger Anfängerfehler sieht so aus:

halloButton.addEventListener("click", zeigeBegruessung());

Das ist falsch, weil die Funktion durch die Klammern sofort ausgeführt wird — also schon beim Laden der Seite.

Richtig ist:

halloButton.addEventListener("click", zeigeBegruessung);

Hier übergibst du die Funktion als Anweisung für später. JavaScript führt sie erst aus, wenn das Ereignis eintritt.

Merke: Bei addEventListener() steht der Funktionsname normalerweise ohne Klammern.

Eine anonyme Funktion verwenden

Du kannst die Funktion auch direkt in addEventListener() schreiben. Das nennt man eine anonyme Funktion, weil sie keinen eigenen Namen hat.

halloButton.addEventListener("click", function () {
  ausgabe.textContent = "Hallo! Schön, dass du da bist.";
});

Oft wird dafür die kürzere Pfeilfunktion verwendet:

halloButton.addEventListener("click", () => {
  ausgabe.textContent = "Hallo! Schön, dass du da bist.";
});

Für kurze Reaktionen ist diese Schreibweise sehr praktisch.

const button = document.querySelector("#hallo-button");

button.addEventListener("click", () => {
  console.log("Klick erkannt!");
});

Wenn dieselbe Funktion an mehreren Stellen gebraucht wird oder der Code länger wird, ist eine benannte Funktion meist übersichtlicher.

Einen Zähler bauen

Ein Klickzähler ist ein gutes erstes Beispiel für ein interaktives Element.

HTML

<button id="zaehl-button">Klick mich</button>
<p>Anzahl der Klicks: <span id="anzahl">0</span></p>

JavaScript

const zaehlButton = document.querySelector("#zaehl-button");
const anzahlAnzeige = document.querySelector("#anzahl");

let anzahlKlicks = 0;

zaehlButton.addEventListener("click", () => {
  anzahlKlicks = anzahlKlicks + 1;
  anzahlAnzeige.textContent = anzahlKlicks;
});

Die Variable anzahlKlicks speichert den aktuellen Wert. Bei jedem Klick wird sie um eins erhöht und anschließend im <span> angezeigt.

Du kannst die Kurzschreibweise ++ verwenden:

anzahlKlicks++;

Die Funktion könnte dann so aussehen:

zaehlButton.addEventListener("click", () => {
  anzahlKlicks++;
  anzahlAnzeige.textContent = anzahlKlicks;
});

Auf Eingaben reagieren

Nicht nur Klicks können Ereignisse auslösen. Mit dem Ereignis input reagiert JavaScript auf jede Änderung in einem Eingabefeld.

HTML

<label for="name">Wie heißt du?</label>
<input id="name" type="text" placeholder="Dein Name">
<p id="begrüßung"></p>

JavaScript

const namensfeld = document.querySelector("#name");
const begruessung = document.querySelector("#begrüßung");

namensfeld.addEventListener("input", () => {
  const name = namensfeld.value;

  begruessung.textContent = "Hallo, " + name + "!";
});

Die Eigenschaft .value liefert den aktuellen Inhalt eines Eingabefelds.

Wenn im Feld noch nichts steht, wäre die Ausgabe „Hallo, !“. Das kannst du mit einer Bedingung verbessern:

namensfeld.addEventListener("input", () => {
  const name = namensfeld.value;

  if (name === "") {
    begruessung.textContent = "";
  } else {
    begruessung.textContent = "Hallo, " + name + "!";
  }
});

Das Event-Objekt

Wenn ein Ereignis passiert, übergibt JavaScript zusätzliche Informationen an deine Funktion. Diese Informationen stecken im Event-Objekt.

button.addEventListener("click", (event) => {
  console.log(event);
});

Der Name event ist frei wählbar. Häufig werden auch e oder ereignis verwendet:

button.addEventListener("click", (e) => {
  console.log(e);
});

Für Anfängerinnen und Anfänger ist event meist am verständlichsten.

Das Element herausfinden, das geklickt wurde

Mit event.target erfährst du, welches Element das Ereignis ausgelöst hat.

<button class="farbe-button">Blau</button>
<button class="farbe-button">Grün</button>
<button class="farbe-button">Rot</button>

const farbButtons = document.querySelectorAll(".farbe-button");

farbButtons.forEach((button) => {
  button.addEventListener("click", (event) => {
    console.log(event.target.textContent);
  });
});

Klickst du auf „Grün“, gibt die Konsole aus:

Grün

event.target ist also das Element, auf das tatsächlich geklickt wurde.

Ein Formular abschicken

Bei Formularen ist das Ereignis submit besonders wichtig.

HTML

<form id="kontakt-formular">
  <label for="email">E-Mail-Adresse</label>
  <input id="email" type="email" required>
  <button type="submit">Absenden</button>
</form>

<p id="meldung"></p>

JavaScript

const formular = document.querySelector("#kontakt-formular");
const meldung = document.querySelector("#meldung");

formular.addEventListener("submit", (event) => {
  event.preventDefault();

  meldung.textContent = "Vielen Dank! Das Formular wurde verarbeitet.";
});

Normalerweise lädt der Browser nach dem Absenden eines Formulars die Seite neu oder wechselt zu einer anderen Adresse. Mit

event.preventDefault();

verhinderst du dieses Standardverhalten.

Das ist hilfreich, wenn JavaScript die Eingaben zunächst prüfen oder direkt auf der Seite verarbeiten soll.

Wichtig: Höre bei Formularen auf submit, nicht nur auf den Klick des Absende-Buttons. So funktioniert die Verarbeitung auch, wenn jemand die Eingabetaste drückt.

Klassen beim Klick umschalten

Mit einem Ereignis kannst du auch das Aussehen eines Elements verändern.

HTML

<button id="design-button">Design wechseln</button>

<p id="text">Dieser Text kann hervorgehoben werden.</p>

CSS

.hervorgehoben {
  background-color: gold;
  color: black;
  font-weight: bold;
  padding: 8px;
}

JavaScript

const designButton = document.querySelector("#design-button");
const text = document.querySelector("#text");

designButton.addEventListener("click", () => {
  text.classList.toggle("hervorgehoben");
});

classList.toggle() funktioniert in zwei Richtungen:

Ist die Klasse noch nicht vorhanden, wird sie hinzugefügt.
Ist die Klasse bereits vorhanden, wird sie entfernt.

Jeder Klick schaltet das Aussehen also um.

Mehrere Ereignisse für ein Element

Ein Element kann auf mehrere Ereignisse reagieren.

const feld = document.querySelector("#name");

feld.addEventListener("focus", () => {
  console.log("Das Eingabefeld ist aktiv.");
});

feld.addEventListener("blur", () => {
  console.log("Das Eingabefeld wurde verlassen.");
});

Dabei bedeutet:

focus: Das Element erhält den Fokus, etwa durch einen Klick ins Feld.
blur: Das Element verliert den Fokus, etwa durch einen Klick außerhalb des Felds.

Du kannst auch mehrere Listener für dasselbe Ereignis registrieren:

button.addEventListener("click", () => {
  console.log("Erste Reaktion");
});

button.addEventListener("click", () => {
  console.log("Zweite Reaktion");
});

Bei einem Klick werden beide Funktionen ausgeführt.

Häufige Ereignisse im Überblick

Ereignis	Wann passiert es?	Typisches Beispiel
`click`	Ein Element wird angeklickt	Button bedienen
`input`	Der Inhalt eines Felds ändert sich	Text beim Tippen anzeigen
`change`	Ein Wert wurde geändert und bestätigt	Auswahlfeld auswerten
`submit`	Ein Formular wird abgeschickt	Formulardaten prüfen
`keydown`	Eine Taste wird gedrückt	Tastenkürzel erkennen
`focus`	Ein Element wird aktiv	Eingabefeld hervorheben
`blur`	Ein Element verliert den Fokus	Eingabe prüfen
`mouseover`	Die Maus fährt über ein Element	Hinweis anzeigen

Typische Fehler und ihre Lösungen

Das Element wurde nicht gefunden

const button = document.querySelector("#mein-button");

button.addEventListener("click", () => {
  console.log("Hallo");
});

Wenn es kein Element mit der ID mein-button gibt, enthält button den Wert null. Dann entsteht ein Fehler.

Prüfe deshalb:

Stimmt die ID im HTML genau mit dem Selektor überein?
Wird das JavaScript erst ausgeführt, nachdem das HTML geladen wurde?

Eine gute Lösung ist, das Script mit defer einzubinden:

<script src="script.js" defer></script>

Mit defer wartet der Browser, bis das HTML vollständig eingelesen wurde.

Das Ereignis steht nicht in Anführungszeichen

Falsch:

button.addEventListener(click, starte);

Richtig:

button.addEventListener("click", starte);

Der Ereignisname ist ein String und braucht deshalb Anführungszeichen.

Die Funktion wird zu früh ausgeführt

Falsch:

button.addEventListener("click", starte());

Richtig:

button.addEventListener("click", starte);

Die Klammern rufen eine Funktion sofort auf. Ohne Klammern wird die Funktion für den späteren Klick gespeichert.

`preventDefault()` fehlt beim Formular

Wenn sich die Seite beim Absenden direkt neu lädt, fehlt wahrscheinlich diese Zeile:

event.preventDefault();

Sie muss innerhalb der Funktion für das submit-Ereignis stehen.

Praxisbeispiel: Eine Aufgabenliste mit Rückmeldung

Dieses kleine Beispiel verbindet Klicks, Eingaben und Bedingungen.

HTML

<label for="aufgabe">Neue Aufgabe</label>
<input id="aufgabe" type="text" placeholder="Zum Beispiel: JavaScript üben">

<button id="hinzufuegen">Hinzufügen</button>

<p id="meldung"></p>
<ul id="liste"></ul>

JavaScript

const aufgabenfeld = document.querySelector("#aufgabe");
const hinzufuegenButton = document.querySelector("#hinzufuegen");
const meldung = document.querySelector("#meldung");
const liste = document.querySelector("#liste");

hinzufuegenButton.addEventListener("click", () => {
  const aufgabe = aufgabenfeld.value;

  if (aufgabe === "") {
    meldung.textContent = "Bitte gib zuerst eine Aufgabe ein.";
  } else {
    const listenElement = document.createElement("li");

    listenElement.textContent = aufgabe;
    liste.append(listenElement);

    meldung.textContent = "Aufgabe wurde hinzugefügt.";
    aufgabenfeld.value = "";
  }
});

Was passiert hier?

Beim Klick liest JavaScript den Inhalt des Eingabefelds aus.
Ist das Feld leer, erscheint eine Hinweismeldung.
Andernfalls wird ein neues <li>-Element erstellt.
Die Aufgabe wird in die Liste eingefügt.
Das Eingabefeld wird wieder geleert.

document.createElement("li") erstellt ein neues HTML-Element. Mit .append() wird es an die Liste angehängt.

Übung

Erstelle einen Button, der einen Absatz ein- und ausblendet.

Vorgabe: HTML

<button id="info-button">Information anzeigen</button>

<p id="info-text">
  JavaScript kann auf Benutzeraktionen reagieren.
</p>

Vorgabe: CSS

.versteckt {
  display: none;
}

Aufgabe

Wähle Button und Absatz mit querySelector() aus.
Reagiere auf das click-Ereignis des Buttons.
Schalte beim Klick die Klasse versteckt am Absatz um.
Ändere den Button-Text passend:
- Ist der Text sichtbar, soll der Button „Information ausblenden“ zeigen.
- Ist der Text versteckt, soll der Button „Information anzeigen“ zeigen.

Mögliche Lösung

const infoButton = document.querySelector("#info-button");
const infoText = document.querySelector("#info-text");

infoButton.addEventListener("click", () => {
  infoText.classList.toggle("versteckt");

  if (infoText.classList.contains("versteckt")) {
    infoButton.textContent = "Information anzeigen";
  } else {
    infoButton.textContent = "Information ausblenden";
  }
});

classList.contains("versteckt") prüft, ob ein Element diese Klasse gerade besitzt. Das Ergebnis ist entweder true oder false.

Zusammenfassung

Mit addEventListener() machst du Webseiten interaktiv:

element.addEventListener("click", () => {
  // Code für den Klick
});

Wichtige Punkte sind:

Ereignisse wie click, input und submit lösen JavaScript-Code aus.
Die Funktion wird ohne Klammern an addEventListener() übergeben.
Mit dem Event-Objekt erhältst du zusätzliche Informationen, etwa über event.target.
event.preventDefault() verhindert das Standardverhalten, zum Beispiel beim Absenden eines Formulars.
Mit classList.toggle() kannst du CSS-Klassen bequem ein- und ausschalten.

Damit kennst du die zentrale Verbindung zwischen Benutzeraktionen und JavaScript-Code — eine wichtige Grundlage für jede interaktive Webseite.

Webseiten interaktiv machen

Das DOM verstehen

Lernziel

Was bedeutet DOM?

Das globale Objekt document

HTML und DOM sind nicht ganz dasselbe

Elemente, Attribute und Inhalte

Die Seite im Browser untersuchen

Warum die Baumstruktur wichtig ist

Ein erstes vollständiges Beispiel

Veränderungen im DOM beobachten

Zusammenfassung

Übungen

1. Das Dokument erkunden

2. Den Seitentitel ändern

3. Die Baumstruktur erkennen

Elemente mit `querySelector()` auswählen

Elemente gezielt auswählen

Ein einfaches HTML-Beispiel

Auswahl über den Elementnamen

Auswahl über eine CSS-Klasse

Auswahl über eine ID

Auswahl genauer beschreiben

Element mit einer bestimmten Klasse

Ein Element innerhalb eines anderen Elements

Ein bestimmtes Eingabefeld

Das ausgewählte Element verwenden

Beispiel: Einen Button auswählen

Was passiert, wenn kein Element gefunden wird?

JavaScript erst nach dem HTML laden

querySelector() und querySelectorAll()

Häufige Fehler

Vollständiges Mini-Beispiel

Merksatz

Inhalte und CSS-Klassen ändern

Lernziele

Inhalte mit textContent ändern

Inhalte mit innerHTML ändern

Wann verwende ich was?

CSS-Klassen mit classList verändern

Eine Klasse hinzufügen: classList.add()

Eine Klasse entfernen: classList.remove()

Eine Klasse umschalten: classList.toggle()

Beispiel: Dunklen Modus umschalten

Prüfen, ob eine Klasse vorhanden ist

Praxisbeispiel: Eine Hinweisbox ein- und ausblenden

HTML

CSS

JavaScript

Was passiert hier?

Alternative: Klassen vollständig ersetzen

Komplettes Beispiel: Richtige und falsche Antwort anzeigen

HTML

CSS

JavaScript

Wichtige Beobachtungen

Häufige Fehler

Die Klasse wird ohne Punkt geschrieben

JavaScript findet das Element nicht

Die alte Klasse bleibt erhalten

Übung

Mögliche Lösung

Zusammenfassung

Ereignisse mit `addEventListener()`

Lernziele

Was sind Ereignisse?

Die Grundstruktur von addEventListener()

Ein Button reagiert auf einen Klick

Funktion übergeben, nicht sofort aufrufen

Eine anonyme Funktion verwenden

Einen Zähler bauen

HTML

JavaScript

Auf Eingaben reagieren

HTML

JavaScript

Das Event-Objekt

Das Element herausfinden, das geklickt wurde

Ein Formular abschicken

HTML

Das globale Objekt `document`

`querySelector()` und `querySelectorAll()`

Inhalte mit `textContent` ändern

Inhalte mit `innerHTML` ändern

CSS-Klassen mit `classList` verändern

Eine Klasse hinzufügen: `classList.add()`

Eine Klasse entfernen: `classList.remove()`

Eine Klasse umschalten: `classList.toggle()`

Die Grundstruktur von `addEventListener()`

`preventDefault()` fehlt beim Formular