Din första trollformel: en knapp som gör något

Jag visar: de tre stegen i varje trollformel

Nästan allt JavaScript gör på en sida följer tre steg:

1. Hitta ett element på sidan (en knapp, en rubrik, en bild…),
2. lyssna på en händelse (ett klick, musen över, text som skrivs…),
3. gör något (ändra texten, färgen, göm den, visa den…).

Så här ser det ut i kod. I HTML, lägg till en knapp och ett stycke:

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

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

Låt oss bryta ner det nya:

• id="my-button" – en namnskylt för elementet, liknande en klass, men ett id ska bara finnas en gång på sidan. JavaScript använder det för att hitta elementet.
• const – en låda med ett namn (en variabel), där vi sparar elementet vi hittade. Mer om variabler nästa gång.
• document.getElementById("...") – “sida, hitta elementet med det här id:t.”
• addEventListener("click", () => { ... }) – “när ett klick händer, kör det som finns inuti klammerparenteserna.” Den där konstiga pilen () => {} kallas en funktion – ett paket kod som körs senare.
• textContent – texten inuti ett element. När du tilldelar den ny text ändras den på sidan direkt.

Nu är det din tur 💪

Lägg till din första trollformel på din webbplats. Välj en efter ditt projekt (eller hitta på en 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: styla din knapp i CSS så den ser snygg ut:

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 här tar du med dig från lektionen

• Varje trollformel: hitta ett element → lyssna på en händelse → gör något.
• document.getElementById("id") hittar ett element, addEventListener("click", () => {...}) väntar på ett klick.
• textContent ändrar ett elements text direkt, utan att sidan laddas om.

© 2026 Ing. Martin Polak / AlgoRhino · Villkor för innehållsanvändning