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

Jeg viser deg: de tre trin i hver trylleformular

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

1. Finn et element på siden (en knap, en overskrift, et bilde…),
2. lyt etter en hændelse (et klik, musen over, indtastning af tekst…),
3. gjør noget (endre teksten, fargen, skjul det, vis det…).

Sådan ser det ud i kode. I HTML, legg til en knap og et avsnitt:

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

La oss bryde de nye ting ned:

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

Nå er det din tur 💪

Legg til din første trylleformular til din nettside. Velg én baseret på prosjektet ditt (eller finn 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;
}

Dette tar du med deg fra leksjonen

• Hver trylleformular: finn et element → lyt etter en hændelse → gjør noget.
• document.getElementById("id") finder et element, addEventListener("click", () => {...}) venter på et klik.
• textContent endrer et elements tekst med en gang, uden gjeninnlasting.

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