Tvoj prvi čar: gumb, ki nekaj naredi

Stran prvič reagira na klik. Naučil se boš najti element in poslušati dogodke.

Pokazal ti bom: trije koraki vsakega čara

Skoraj vse, kar JavaScript naredi na strani, sledi trem korakom:

Najdi element na strani (gumb, naslov, sliko…),
poslušaj dogodek (klik, miško nad elementom, tipkanje besedila…),
naredi nekaj (spremeni besedilo, barvo, skrij, pokaži…).

Tako to izgleda v kodi. V HTML dodaj gumb in odstavek:

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

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

Razčlenimo novosti:

id="my-button" – imenska etiketa za element, podobna razredu, ampak se id na strani sme pojaviti samo enkrat. JavaScript ga uporabi, da najde element.
const – škatla z imenom (spremenljivka), kamor shranimo najdeni element. Več o spremenljivkah naslednjič.
document.getElementById("...") – »stran, najdi mi element s tem id-jem.«
addEventListener("click", () => { ... }) – »ko se zgodi klik, zaženi, kar je v zavitih oklepajih.« Tista smešna puščica () => {} se imenuje funkcija – paket kode, ki se požene kasneje.
textContent – besedilo znotraj elementa. Ko mu dodeliš novo besedilo, se na strani takoj spremeni.

Na tebi je 💪

Na spletno stran dodaj svoj prvi čar. Izberi enega glede na projekt (ali si izmislji svojega):

🏫 Šolska spletna stran – gumb »Kaj je danes za kosilo?«

HTML (na domači strani):

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

🙋 Osebna spletna stran – gumb »Povej šalo«

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

🌍 Potopisni dnevnik – gumb »Kam gremo naslednjič?«

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

⚽ Klubska spletna stran – gumb »Kdaj je naslednja tekma?«

<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: gumb oblikuj v CSS, da lepo 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 deluje? Odpri konzolo (F12). Najpogostejše napake: 1) id v HTML se ne ujema natančno z imenom v getElementById (šteje tudi velikost črk), 2) <script> ni povsem na koncu <body>, 3) manjkajoči oklepaj – konzola ti pove številko vrstice.

✅

Preveri se: Klikneš gumb in na strani se pojavi besedilo. Pravkar si povezal vse tri jezike spleta: HTML (gumb), CSS (videz) in JavaScript (obnašanje).

Kaj odneseš iz lekcije

Vsak čar: najdi element → poslušaj dogodek → naredi nekaj.
document.getElementById("id") najde element, addEventListener("click", () => {...}) čaka na klik.
textContent takoj spremeni besedilo elementa, brez ponovnega nalaganja strani.