První kouzlo: tlačítko, které něco udělá

Stránka poprvé zareaguje na kliknutí. Naučíš se najít prvek a poslouchat události.

Ukaž mi to: tři kroky každého kouzla

Skoro všechno, co JavaScript na stránce dělá, má tři kroky:

Najdi prvek na stránce (tlačítko, nadpis, obrázek…),
poslouchej událost (kliknutí, najetí myší, napsání textu…),
něco proveď (změň text, barvu, schovej, ukaž…).

Takhle to vypadá v kódu. Do HTML si dáme tlačítko a odstavec:

<button id="tlacitko">Klikni na mě</button>
<p id="pozdrav">Zatím se nic nestalo.</p>

A ve skript.js:

// 1. Najdi prvky podle jejich id
const tlacitko = document.getElementById("tlacitko");
const pozdrav = document.getElementById("pozdrav");

// 2. Poslouchej kliknutí na tlačítko
tlacitko.addEventListener("click", () => {
  // 3. Proveď: změň text odstavce
  pozdrav.textContent = "Kouzlo funguje! 🎉";
});

Rozklíčujeme si novinky:

id="tlacitko" – jmenovka prvku, podobná třídě, ale id má být na stránce jen jednou. JavaScript podle ní prvek najde.
const – krabička se jménem (proměnná), do které si ukládáme nalezený prvek. O proměnných víc příště.
document.getElementById("...") – „stránko, najdi mi prvek s tímhle id”.
addEventListener("click", () => { ... }) – „když se stane kliknutí, spusť, co je ve složených závorkách”. Té zvláštní šipce () => {} se říká funkce – balíček kódu, který se spustí později.
textContent – text uvnitř prvku. Když do něj přiřadíš nový text, na stránce se okamžitě vymění.

Teď ty 💪

Přidej na svůj web první kouzlo. Vyber si podle projektu (nebo vymysli vlastní):

🏫 Stránky školy – tlačítko „Co je dnes k obědu?"

HTML (na hlavní stránku):

<button id="obed-tlacitko">Co je dnes k obědu?</button>
<p id="obed"></p>

skript.js:

const obedTlacitko = document.getElementById("obed-tlacitko");
const obed = document.getElementById("obed");

obedTlacitko.addEventListener("click", () => {
  obed.textContent = "Dnes: buchtičky se šodó! 🍮";
});

🙋 Osobní stránky – tlačítko „Řekni mi vtip"

<button id="vtip-tlacitko">Řekni mi vtip</button>
<p id="vtip"></p>

const vtipTlacitko = document.getElementById("vtip-tlacitko");
const vtip = document.getElementById("vtip");

vtipTlacitko.addEventListener("click", () => {
  vtip.textContent = "Proč programátor nosí brýle? Protože nevidí C! 😄";
});

🌍 Cestovatelský deník – tlačítko „Kam pojedeme příště?"

<button id="kam-tlacitko">Kam pojedeme příště?</button>
<p id="kam"></p>

const kamTlacitko = document.getElementById("kam-tlacitko");
const kam = document.getElementById("kam");

kamTlacitko.addEventListener("click", () => {
  kam.textContent = "Balíme batohy: jedeme k moři do Řecka! 🌊";
});

⚽ Web klubu – tlačítko „Kdy je další zápas?"

<button id="zapas-tlacitko">Kdy je další zápas?</button>
<p id="zapas"></p>

const zapasTlacitko = document.getElementById("zapas-tlacitko");
const zapas = document.getElementById("zapas");

zapasTlacitko.addEventListener("click", () => {
  zapas.textContent = "V sobotu v 10:00 doma proti Lipové. Přijď fandit! 📣";
});

Bonus: nastyluj tlačítko v CSS, ať vypadá k světu:

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? Otevři konzoli (F12). Nejčastější chyby: 1) id v HTML se přesně neshoduje se jménem v getElementById (i velká/malá písmena), 2) <script> není až na konci <body>, 3) zapomenutá závorka – konzole ti řekne řádek.

✅

Kontrola: Klikneš na tlačítko a na stránce se objeví text. Právě jsi propojil(a) všechny tři jazyky webu: HTML (tlačítko), CSS (vzhled) a JavaScript (chování).

Co si z téhle lekce odnést

Každé kouzlo: najdi prvek → poslouchej událost → proveď akci.
document.getElementById("id") najde prvek, addEventListener("click", () => {...}) čeká na kliknutí.
textContent mění text prvku okamžitě, bez obnovení stránky.