Первый интерактивный интерфейс без фреймворка

Три части интерфейса

DOM — представление документа в виде объектов, с которыми работает JavaScript. Для счётчика нужны данные, обработчик действия и функция отображения. Значение хранится в переменной. Кнопка сообщает о клике. Функция render переносит текущее значение в текст элемента.

Выделенная функция отображения помогает не забыть обновить интерфейс после другого действия, например сброса. В этом примере состояние не читается обратно из текста на странице.

Свяжите действие с состоянием

Добавьте в документ кнопку с id="increment" и элемент output с id="counter". Скрипт подключите с атрибутом defer, чтобы элементы уже существовали к моменту его выполнения.

const button = document.querySelector("#increment");
const output = document.querySelector("#counter");
let count = 0;

function render() {
  output.textContent = String(count);
}

button.addEventListener("click", () => {
  count += 1;
  render();
});

render();

Текст не должен становиться разметкой

Используйте textContent, когда нужно показать обычную строку. innerHTML разбирает строку как HTML; непроверенные значения в нём могут создать опасную разметку. Для динамического списка можно создавать элементы через document.createElement и задавать им текст отдельно.

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