Dein erster Zauber: ein Button, der etwas tut

Zeig mir das: die drei Schritte jedes Zaubers

Fast alles, was JavaScript auf einer Seite macht, folgt drei Schritten:

1. Finde ein Element auf der Seite (einen Button, eine Überschrift, ein Bild…),
2. höre auf ein Ereignis (einen Klick, Maus darüberfahren, Text tippen…),
3. tu etwas (ändere den Text, die Farbe, versteck es, zeig es…).

So sieht das im Code aus. Füge im HTML einen Button und einen Absatz hinzu:

<button id="my-button">Click me</button>
<p id="greeting">Nothing has happened yet.</p>

Und in script.js:

// 1. Find the elements by their id
const myButton = document.getElementById("my-button");
const greeting = document.getElementById("greeting");

// 2. Listen for a click on the button
myButton.addEventListener("click", () => {
  // 3. Do something: change the paragraph's text
  greeting.textContent = "The spell works! 🎉";
});

Schauen wir uns die neuen Sachen an:

• id="my-button" – ein Namensschild für das Element, ähnlich wie eine Klasse, aber eine id sollte nur einmal auf der Seite vorkommen. JavaScript benutzt sie, um das Element zu finden.
• const – eine Box mit einem Namen (eine Variable), in der wir das gefundene Element speichern. Mehr über Variablen beim nächsten Mal.
• document.getElementById("...") – „Seite, finde mir das Element mit dieser id.”
• addEventListener("click", () => { ... }) – „wenn ein Klick passiert, führ aus, was in den geschweiften Klammern steht.” Dieser komische Pfeil () => {} heißt Funktion – ein Paket Code, das später läuft.
• textContent – der Text innerhalb eines Elements. Wenn du ihm neuen Text zuweist, ändert er sich sofort auf der Seite.

Jetzt du 💪

Füge deinem ersten Zauber auf deiner Website hinzu. Wähl einen passend zu deinem Projekt (oder erfinde deinen eigenen):

<button id="lunch-button">What's for lunch today?</button>
<p id="lunch"></p>

const lunchButton = document.getElementById("lunch-button");
const lunch = document.getElementById("lunch");

lunchButton.addEventListener("click", () => {
  lunch.textContent = "Today: pizza and salad! 🍕";
});

<button id="joke-button">Tell me a joke</button>
<p id="joke"></p>

const jokeButton = document.getElementById("joke-button");
const joke = document.getElementById("joke");

jokeButton.addEventListener("click", () => {
  joke.textContent = "Why do programmers prefer dark mode? Because light attracts bugs! 😄";
});

<button id="where-button">Where are we going next?</button>
<p id="where"></p>

const whereButton = document.getElementById("where-button");
const where = document.getElementById("where");

whereButton.addEventListener("click", () => {
  where.textContent = "Packing our bags: we're headed to the beach in Greece! 🌊";
});

<button id="match-button">When's the next match?</button>
<p id="match"></p>

const matchButton = document.getElementById("match-button");
const match = document.getElementById("match");

matchButton.addEventListener("click", () => {
  match.textContent = "Saturday at 10:00, home game vs. Riverside. Come cheer us on! 📣";
});

Bonus: Styl deinen Button in CSS, damit er schön aussieht:

button {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background-color: #1d4ed8;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #1e40af;
}

Das nimmst du aus dieser Lektion mit

• Jeder Zauber: Element finden → auf Ereignis hören → etwas tun.
• document.getElementById("id") findet ein Element, addEventListener("click", () => {...}) wartet auf einen Klick.
• textContent ändert den Text eines Elements sofort, ohne die Seite neu zu laden.

© 2026 Ing. Martin Polak / AlgoRhino · Nutzungsbedingungen für Inhalte