Je eerste spreuk: een knop die iets doet

Ik laat je zien: de drie stappen van elke spreuk

Bijna alles wat JavaScript op een pagina doet, volgt drie stappen:

1. Vind een element op de pagina (een knop, een kop, een afbeelding…),
2. luister naar een gebeurtenis (een klik, muis eroverheen, tekst typen…),
3. doe iets (verander de tekst, de kleur, verberg het, toon het…).

Zo ziet dat er in code uit. Voeg in de HTML een knop en een alinea toe:

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

En 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! 🎉";
});

Laten we het nieuwe uitleggen:

• id="my-button" – een naamkaartje voor het element, vergelijkbaar met een class, maar een id mag maar één keer op de pagina voorkomen. JavaScript gebruikt het om het element te vinden.
• const – een doos met een naam (een variabele), waar we het gevonden element in bewaren. Meer over variabelen de volgende keer.
• document.getElementById("...") – “pagina, zoek het element met dit id.”
• addEventListener("click", () => { ... }) – “als er een klik gebeurt, voer uit wat tussen de accolades staat.” Die grappige pijl () => {} heet een functie – een pakket code dat later draait.
• textContent – de tekst in een element. Als je er nieuwe tekst aan toekent, verandert die meteen op de pagina.

Nu jij 💪

Voeg je eerste spreuk toe aan je website. Kies er één op basis van je project (of verzin je eigen):

<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: style je knop in CSS zodat hij er mooi uitziet:

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;
}

Wat neem je mee uit deze les

• Elke spreuk: vind een element → luister naar een gebeurtenis → doe iets.
• document.getElementById("id") vindt een element, addEventListener("click", () => {...}) wacht op een klik.
• textContent verandert de tekst van een element meteen, zonder pagina te verversen.

© 2026 Ing. Martin Polak / AlgoRhino · Contentgebruiksvoorwaarden