Reakce na kliknutí

Vaše skripty zatím dělaly všechno najednou, hned při načtení stránky. Interaktivní je ale stránka až tehdy, když reaguje na to, co dělá uživatel. Tomu, co se na stránce stane, třeba kliknutí, stisku klávesy nebo psaní do textového pole, se říká událost (anglicky event).

Tlačítko je prvek button, například <button id="ahoj">Pozdravit</button>. Aby něco dělalo, řekněte mu, kterou funkci má spustit, když se na něj klikne:

const tlacitkoAhoj = document.querySelector("#ahoj");
const zprava = document.querySelector("#zprava");

tlacitkoAhoj.addEventListener("click", function () {
    zprava.textContent = "Ahoj!";
});

Metoda addEventListener() dostane dva argumenty: název události v uvozovkách ("click", tedy kliknutí) a funkci. Funkce tu nemá název, píše se rovnou tam, kde je potřeba. Všimněte si, jak kód končí: } uzavírá funkci, ) uzavírá závorky addEventListener( a pak následuje středník.

Při načtení stránky skript funkci jen předá tlačítku, nespustí ji. Funkce se spustí až později, pokaždé, když někdo na tlačítko klikne: při prvním kliknutí, při druhém a tak dále. Takové funkci se říká obsluha události.

Obsluha může být i šipková funkce (se šipkou =>):

tlacitkoAhoj.addEventListener("click", () => {
    zprava.textContent = "Ahoj!";
});

Nebo funkce, kterou jste definovali předem; předáte ji jejím názvem:

function pozdravit() {
    zprava.textContent = "Ahoj!";
}

tlacitkoAhoj.addEventListener("click", pozdravit);

Pozor na častou chybu: addEventListener("click", pozdravit()). Se závorkami se pozdravit() zavolá hned při načtení stránky a addEventListener() dostane místo funkce to, co funkce vrátila (undefined). Žádná chyba se neobjeví, ale zpráva se ukáže dřív, než kdokoli klikne, a kliknutí nic neudělá. Funkci předávejte bez závorek: zavolá ji sám prohlížeč, při každém kliknutí.