Счётчик нажатий

Обработчику часто нужно помнить что-то от одного нажатия до другого, например сколько раз нажали на кнопку. Страница показывает данные, а помнят их переменные вашей программы. Вот счётчик стаканов воды, выпитых сегодня:

const countText = document.querySelector("#count");
const drinkButton = document.querySelector("#drink");

let glasses = 0;

drinkButton.addEventListener("click", function () {
    glasses++;
    countText.textContent = glasses;
});

При каждом нажатии обработчик сначала меняет переменную, а затем показывает её новое значение на странице. textContent сам превращает число в текст.

Переменная создаётся через let, потому что её значение меняется, и находится вне функции. Почему не внутри? Переменная, созданная внутри функции, существует только пока функция работает, а каждое нажатие запускает функцию заново. Если написать let glasses = 0; внутри обработчика, то каждое нажатие начиналось бы с 0, и страница всегда показывала бы 1.

Запомните этот приём, он будет нужен вам постоянно: данные живут в переменных. Когда что-то происходит, меняйте переменные, а затем показывайте их на странице.