Tvoja prva čarolija: gumb koji nešto radi

Stranica prvi put reagira na klik. Naučit ćeš pronaći element i slušati događaje.

Pokazat ću ti: tri koraka svake čarolije

Gotovo sve što JavaScript radi na stranici slijedi tri koraka:

Pronađi element na stranici (gumb, naslov, slika…),
slušaj događaj (klik, prelazak mišem, tipkanje…),
učini nešto (promijeni tekst, boju, sakrij, prikaži…).

Evo kako to izgleda u kodu. U HTML dodaj gumb i odlomak:

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

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

Rastavimo novo:

id="my-button" – oznaka za element, slično klasi, ali id bi trebao biti samo jednom na stranici. JavaScript ga koristi da pronađe element.
const – kutija s nazivom (varijabla) u koju spremamo pronađeni element. Više o varijablama sljedeći put.
document.getElementById("...") – “stranico, pronađi mi element s ovim id-om.”
addEventListener("click", () => { ... }) – “kad se dogodi klik, pokreni što god je unutar vitičastih zagrada.” Ta čudna strelica () => {} zove se funkcija – paket koda koji se pokrene kasnije.
textContent – tekst unutar elementa. Kad mu dodijeliš novi tekst, odmah se promijeni na stranici.

Sad si ti na redu 💪

Dodaj svoju prvu čaroliju na web stranicu. Odaberi jednu prema svom projektu (ili smisli svoju):

🏫 Web stranica škole – gumb "Što je danas za ručak?"

HTML (na početnoj stranici):

<button id="lunch-button">What's for lunch today?</button>
<p id="lunch"></p>

script.js:

const lunchButton = document.getElementById("lunch-button");
const lunch = document.getElementById("lunch");

lunchButton.addEventListener("click", () => {
  lunch.textContent = "Today: pizza and salad! 🍕";
});

🙋 Osobna web stranica – gumb "Ispričaj vic"

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

🌍 Putni dnevnik – gumb "Kamo idemo sljedeće?"

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

⚽ Web stranica kluba – gumb "Kad je sljedeća utakmica?"

<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: stiliziraj gumb u CSS-u da lijepo izgleda:

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

⚠️

Ne radi? Otvori konzolu (F12). Najčešće greške: 1) id u HTML-u točno ne odgovara nazivu u getElementById (čak i velika/mala slova!), 2) <script> nije na samom kraju <body>, 3) nedostaje zagrada – konzola će reći broj retka.

✅

Provjeri sam sebe: Klikneš gumb i tekst se pojavi na stranici. Upravo si povezao sva tri jezika weba: HTML (gumb), CSS (izgled) i JavaScript (ponašanje).

Što ćeš ponijeti iz ove lekcije

Svaka čarolija: pronađi element → slušaj događaj → učini nešto.
document.getElementById("id") pronalazi element, addEventListener("click", () => {...}) čeka klik.
textContent mijenja tekst elementa odmah, bez ponovnog učitavanja stranice.