Tvoje prvé kúzlo: tlačidlo, ktoré niečo robí

Stránka prvýkrát zareaguje na kliknutie. Naučíš sa nájsť prvok a počúvať udalosti.

Ukážem ti: tri kroky každého kúzla

Takmer všetko, čo JavaScript na stránke robí, má tri kroky:

Nájdi prvok na stránke (tlačidlo, nadpis, obrázok…),
počúvaj udalosť (kliknutie, prejdenie myšou, písanie textu…),
urob niečo (zmeň text, farbu, skry, ukáž…).

Takto to vyzerá v kóde. Do HTML pridaj tlačidlo a odstavec:

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

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

Rozoberme nové veci:

id="my-button" – menovka prvku, podobná triede, ale id by sa na stránke malo objaviť len raz. JavaScript ho používa na nájdenie prvku.
const – box s názvom (premenná), kde uložíme nájdený prvok. O premenných viac nabudúce.
document.getElementById("...") – „stránka, nájdi mi prvok s týmto id.”
addEventListener("click", () => { ... }) – „keď sa stane kliknutie, spusti, čo je v zložených zátvorkách.” Tá zvláštna šípka () => {} sa volá funkcia – balík kódu, ktorý sa spustí neskôr.
textContent – text vnútri prvku. Keď mu priradíš nový text, na stránke sa hneď zmení.

Teraz ty 💪

Pridaj na svoju webovú stránku prvé kúzlo. Vyber jedno podľa svojho projektu (alebo si vymysli vlastné):

🏫 Webová stránka školy – tlačidlo „Čo je dnes na obed?"

HTML (na domovskej stránke):

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

🙋 Osobná webová stránka – tlačidlo „Povedz vtip"

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

🌍 Cestovný denník – tlačidlo „Kam ideme ďalej?"

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

⚽ Webová stránka klubu – tlačidlo „Kedy je ďalší zápas?"

<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: naštýluj tlačidlo v CSS, aby pekne vyzeralo:

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

⚠️

Nefunguje to? Otvor konzolu (F12). Najčastejšie chyby: 1) id v HTML presne nesedí s názvom v getElementById (záleží aj na veľkých písmenách), 2) <script> nie je úplne na konci <body>, 3) chýbajúca zátvorka – konzola ti povie číslo riadku.

✅

Skontroluj sa: Klikneš na tlačidlo a na stránke sa objaví text. Práve si prepojil všetky tri jazyky webu: HTML (tlačidlo), CSS (vzhľad) a JavaScript (správanie).

Čo si z tejto lekcie odnášaš

Každé kúzlo: nájdi prvok → počúvaj udalosť → urob niečo.
document.getElementById("id") nájde prvok, addEventListener("click", () => {...}) čaká na kliknutie.
textContent zmení text prvku okamžite, bez obnovenia stránky.