Webseiten mit JavaScript: DOM und Klicks

Das lernst du

Mit document.querySelector ein Element der Seite finden
Text und Aussehen eines Elements mit JavaScript ändern
Mit addEventListener auf Klicks reagieren

Die Seite als Baum

Der Browser macht aus deinem HTML einen Baum aus Elementen: die Überschrift, die Absätze, die Knöpfe. Dieser Baum heißt DOM (Document Object Model). Mit JavaScript kannst du ihn lesen und ändern – während die Seite schon angezeigt wird.

JavaScript steht in einem <script>-Teil. Am besten unten, nach dem HTML – dann gibt es die Elemente schon, wenn das Skript sie sucht.

Elemente finden und ändern

document.querySelector("#titel") findet das Element mit id="titel". Das # steht für eine id, so wie der Punkt bei CSS für eine Klasse steht:

<h1 id="titel">Guten Morgen!</h1>
<p id="info">Hier steht noch nichts Besonderes.</p>

<script>
  const titel = document.querySelector("#titel");
  titel.textContent = "Guten Abend!";
  titel.style.color = "midnightblue";

  const info = document.querySelector("#info");
  info.textContent = "Dieser Text kommt aus JavaScript.";
  console.log("Fertig geändert!");
</script>

Was du mit console.log ausgibst, erscheint unten in der Konsole.

Befehl	Was er macht
`element.textContent = "Hallo"`	Text ändern
`element.style.color = "red"`	eine CSS-Eigenschaft ändern
`element.classList.add("wichtig")`	Klasse hinzufügen
`element.classList.toggle("an")`	Klasse an- oder ausschalten

Auf Klicks reagieren

Mit addEventListener("click", …) sagst du: „Wenn jemand hierauf klickt, mach das.“ Die Funktion dahinter läuft bei jedem Klick neu:

<button id="knopf">Klick mich!</button>
<p id="antwort"></p>

<script>
  let klicks = 0;
  const antwort = document.querySelector("#antwort");

  document.querySelector("#knopf").addEventListener("click", () => {
    klicks = klicks + 1;
    antwort.textContent = `Du hast ${klicks}-mal geklickt.`;
    console.log("Klick Nummer", klicks);
  });
</script>

Klick in der Vorschau ein paarmal auf den Knopf und schau in die Konsole.

Licht an, Licht aus

classList.toggle schaltet eine Klasse bei jedem Aufruf um. So baust du einen Lichtschalter:

<style>
  body { font-family: sans-serif; transition: background 0.3s; }
  .dunkel { background: #111; color: #eee; }
</style>

<h2>Lichtschalter</h2>
<button id="schalter">💡 Schalten</button>

<script>
  document.querySelector("#schalter").addEventListener("click", () => {
    document.body.classList.toggle("dunkel");
  });
</script>

Merke: HTML legt fest, was da ist. CSS legt fest, wie es aussieht. JavaScript legt fest, was passiert. In der Aufgabe brauchst du alle drei.

Deine Aufgabe

Jetzt bist du dran

Bau einen Klick-Zähler. Auf der Seite stehen schon die Zahl <span id="zahl">0</span> und zwei Knöpfe. Ein Klick auf Plus (#plus) erhöht die Zahl um 1. Ein Klick auf Null (#null) setzt sie wieder auf 0. Ab 10 soll die Zahl rot sein (style.color = "red"), darunter wieder normal (style.color = "").

<style>
  body { font-family: sans-serif; text-align: center; }
  #zahl { font-size: 64px; display: block; margin: 20px; }
  button { font-size: 20px; padding: 8px 16px; }
</style>

<span id="zahl">0</span>
<button id="plus">Plus</button>
<button id="null">Null</button>

<script>
  let zaehler = 0;
  const anzeige = document.querySelector("#zahl");

  // Hier kommen die Klicks hin
</script>

Denkanstoß
document.querySelector("#plus").addEventListener("click", () => { … }) – darin zaehler erhöhen und anzeige.textContent = zaehler setzen.
Welcher Befehl hilft?
Beim Klick auf Null musst du die Variable zaehler UND die Anzeige auf 0 setzen.
Nach jedem Klick: if (zaehler >= 10) { anzeige.style.color = "red"; } else { anzeige.style.color = ""; }

Ohne Hinweise gelöst gibt es einen ⭐ auf deiner Fortschrittsseite.

Lösung anzeigen

Versuch es erst selbst – aus Fehlern lernt man am meisten. Hier ist eine mögliche Lösung:

<style>
  body { font-family: sans-serif; text-align: center; }
  #zahl { font-size: 64px; display: block; margin: 20px; }
  button { font-size: 20px; padding: 8px 16px; }
</style>

<span id="zahl">0</span>
<button id="plus">Plus</button>
<button id="null">Null</button>

<script>
  let zaehler = 0;
  const anzeige = document.querySelector("#zahl");

  function zeigen() {
    anzeige.textContent = zaehler;
    anzeige.style.color = zaehler >= 10 ? "red" : "";
  }

  document.querySelector("#plus").addEventListener("click", () => {
    zaehler = zaehler + 1;
    zeigen();
  });

  document.querySelector("#null").addEventListener("click", () => {
    zaehler = 0;
    zeigen();
  });
</script>