Ensimmäinen loitsusi: painike joka tekee jotain

Näytän sinulle: kolme askelta jokaisessa loitsussa

Lähes kaikki mitä JavaScript tekee sivulla noudattaa kolmea askelta:

1. Löydä elementti sivulta (painike, otsikko, kuva…),
2. kuuntele tapahtumaa (klikkaus, hiiren vienti päälle, tekstin kirjoittaminen…),
3. tee jotain (vaihda teksti, väri, piilota, näytä…).

Näin se näyttää koodissa. HTML:ään lisää painike ja kappale:

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

Ja script.js:ään:

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

Puretaan uudet asiat:

• id="my-button" – nimilappu elementille, vähän kuin luokka, mutta id saa olla vain kerran sivulla. JavaScript käyttää sitä elementin löytämiseen.
• const – laatikko nimellä (muuttuja), johon tallennamme löydetyn elementin. Lisää muuttujista ensi kerralla.
• document.getElementById("...") – “sivu, löydä minulle elementti tällä id:llä.”
• addEventListener("click", () => { ... }) – “kun klikkaus tapahtuu, aja mitä aaltosulkeiden sisällä on.” Tuo outo nuoli () => {} on funktio – koodipaketti joka ajetaan myöhemmin.
• textContent – teksti elementin sisällä. Kun annat sille uutta tekstiä, se muuttuu sivulla heti.

Nyt sinun vuorosi 💪

Lisää verkkosivullesi ensimmäinen loitsusi. Valitse yksi projektisi mukaan (tai keksi oma):

<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: tyylittele painike CSS:llä niin että se näyttää kivalta:

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

Mitä opit tästä oppitunnista

• Jokainen loitsu: löydä elementti → kuuntele tapahtumaa → tee jotain.
• document.getElementById("id") löytää elementin, addEventListener("click", () => {...}) odottaa klikkausta.
• textContent vaihtaa elementin tekstin heti, ilman sivun uudelleenlatausta.

© 2026 Ing. Martin Polak / AlgoRhino · Sisällön käyttöehdot