Počítadlo kliknutí

Obsluha si často potřebuje něco pamatovat od jednoho kliknutí k dalšímu, třeba kolikrát se na tlačítko kliklo. Stránka věci jen ukazuje, pamatují si je proměnné ve vašem programu. Tady je počítadlo sklenic vody, které jste dnes vypili:

const pocetText = document.querySelector("#pocet");
const tlacitkoNapit = document.querySelector("#napit");

let sklenice = 0;

tlacitkoNapit.addEventListener("click", function () {
    sklenice++;
    pocetText.textContent = sklenice;
});

Při každém kliknutí obsluha nejdřív změní proměnnou a pak ukáže její novou hodnotu na stránce. Číslo na text převede textContent sám.

Proměnná je vytvořená mimo funkci, a to pomocí let, protože se její hodnota mění. Proč ne uvnitř? Proměnná vytvořená uvnitř funkce existuje jen po dobu, kdy funkce běží, a každé kliknutí spustí funkci znovu od začátku. S let sklenice = 0; uvnitř obsluhy by každé kliknutí začalo zase od nuly a stránka by navždy ukazovala 1.

Tenhle postup si zapamatujte, budete ho používat pořád: data jsou v proměnných. Když se něco stane, změňte proměnné a pak je ukažte na stránce.