Ať web reaguje: kliknutí a změna stránky

A teď to nejzábavnější: ať stránka reaguje na návštěvníka. Skoro vždy je to ve třech krocích – najít prvek, počkat na událost (třeba kliknutí) a něco změnit. Projdeme je po řadě.

1. Najít prvek – querySelector

Nejdřív prvku v HTML dáte id (nebo třídu), ať se na něj dá odkázat:

<button id="tlacitko">Klikni</button>
<p id="vystup">Zatím nic</p>

A v JavaScriptu si ho „chytnete" pomocí document.querySelector:

const tlacitko = document.querySelector("#tlacitko");
const vystup = document.querySelector("#vystup");

Zápis je stejný jako v CSS: # znamená id, . znamená třídu.

2. Zareagovat na kliknutí – addEventListener

Prvku řeknete, ať „poslouchá" na událost. Při každém kliknutí se spustí funkce uvnitř:

tlacitko.addEventListener("click", function () {
  vystup.textContent = "Klikl jsi! 🎉";
});

"click" je název události (jsou i další, třeba psaní do políčka), a funkce za ní je to, co se má stát.

3. Měnit stránku

Jakmile prvek máte, můžete mu měnit text, barvu i třídy:

vystup.textContent = "Nový text";       // změní text
vystup.style.color = "green";            // změní barvu
vystup.classList.add("zvyrazneno");      // přidá CSS třídu
vystup.classList.toggle("skryto");       // zapne/vypne třídu

Právě classList.toggle je šikovné na ukazování a schovávání – jedním klikem třídu přidáte, dalším odeberete.

Celý příklad: počítadlo kliknutí

Spojíme všechno dohromady – tlačítko, které počítá, kolikrát jste klikli:

<button id="tlac">Klikni na mě</button>
<p id="pocet">Počet kliknutí: 0</p>

const tlac = document.querySelector("#tlac");
const pocet = document.querySelector("#pocet");
let n = 0;

tlac.addEventListener("click", function () {
  n = n + 1;
  pocet.textContent = "Počet kliknutí: " + n;
});

A takhle to funguje naživo – klikejte:

Časté chyby

• querySelector nic nenajde. Překlep v id, nebo skript běží dřív než HTML – dejte ho na konec <body>.
• Špatný selektor. Je to jako v CSS: # pro id, . pro třídu.
• textContent vs innerHTML. Na text používejte textContent – je bezpečnější. innerHTML vkládá HTML, a když do něj pustíte text od uživatele, hrozí zneužití (XSS).
• Překlep v názvu události. Je to "click", ne "klik".

A to je celá trojice! Umíte teď JavaScript přidat na stránku, napsat proměnné, podmínky a funkce a hlavně rozhýbat stránku podle toho, co návštěvník dělá. To je základ každé interaktivity na webu. 🎉