Din første trylleformular: en knap, der gør noget

Vis mig: de tre trin i enhver trylleformular

Næsten alt JavaScript gør på en side følger tre trin:

1. Find et element på siden (en knap, en overskrift, et billede…),
2. lyt efter en hændelse (et klik, musen over, indtastning af tekst…),
3. gør noget (ændr teksten, farven, skjul det, vis det…).

Sådan ser det ud i kode. I HTML, tilføj en knap og et afsnit:

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

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

Lad os bryde de nye ting ned:

• id="my-button" – et navneskilt til elementet, ligesom en klasse, men et id bør kun forekomme én gang på siden. JavaScript bruger det til at finde elementet.
• const – en boks med et navn (en variabel), hvor vi gemmer det fundne element. Mere om variabler næste gang.
• document.getElementById("...") – “side, find mig elementet med dette id.”
• addEventListener("click", () => { ... }) – “når der sker et klik, kør det, der er inde i de krøllede parenteser.” Den mærkelige pil () => {} kaldes en funktion – en pakke kode, der kører senere.
• textContent – teksten inde i et element. Når du tildeler den ny tekst, ændrer den sig på siden med det samme.

Nu er det din tur 💪

Tilføj din første trylleformular til din hjemmeside. Vælg én baseret på dit projekt (eller find på din egen):

<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 din knap i CSS, så den ser pæn ud:

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

Det tager du med fra denne lektion

• Enhver trylleformular: find et element → lyt efter en hændelse → gør noget.
• document.getElementById("id") finder et element, addEventListener("click", () => {...}) venter på et klik.
• textContent ændrer et elements tekst med det samme, uden sidegenindlæsning.

© 2026 Ing. Martin Polak / AlgoRhino · Vilkår for indholdsbrug