Реакция на нажатия

До сих пор ваши скрипты делали всё сразу, при загрузке страницы. Но страница становится интерактивной, когда реагирует на действия пользователя. То, что происходит на странице, — нажатие, клавиша или ввод в поле, — называется событиями.

Кнопка — это элемент button, например <button id="hello">Поздороваться</button>. Чтобы она что-то делала, скажите ей, какую функцию запускать при нажатии:

const helloButton = document.querySelector("#hello");
const message = document.querySelector("#message");

helloButton.addEventListener("click", function () {
    message.textContent = "Привет!";
});

Метод addEventListener() принимает два аргумента: название события в кавычках ("click") и функцию. У функции здесь нет имени: она записана прямо там, где нужна. Обратите внимание, как заканчивается код: } закрывает функцию, ) закрывает скобки addEventListener(, а затем идёт точка с запятой.

При загрузке страницы скрипт только передаёт функцию кнопке, но не запускает её. Функция запускается позже, при каждом нажатии на кнопку: при первом, при втором и так далее. Такая функция называется обработчиком события.

Обработчиком может быть и стрелочная функция:

helloButton.addEventListener("click", () => {
    message.textContent = "Привет!";
});

Или функция, которую вы определили раньше и передаёте по имени:

function sayHello() {
    message.textContent = "Привет!";
}

helloButton.addEventListener("click", sayHello);

Остерегайтесь типичной ошибки: addEventListener("click", sayHello()). Со скобками sayHello() вызывается сразу, при загрузке страницы, а addEventListener() получает не функцию, а то, что она вернула (undefined). Ошибки нет, но сообщение появляется ещё до нажатия, а нажатие ничего не делает. Передавайте функцию без скобок: браузер сам вызовет её при каждом нажатии.