В нашей предыдущей главе: Управление DOM: управление элементами HTML с помощью Javascript мы узнали, как ориентироваться на элементы и обновлять их с помощью JS. В этой главе мы создадим счетчик кликов, используя эти навыки.

Начиная с нуля

Создайте новую папку, назовем ее click-counter. Щелкните правой кнопкой мыши эту папку и выберите Открыть с помощью кода. После того, как папка откроется в VSCode, мы создадим здесь два файла:

  1. index.html
  2. main.js

мы создадим третий файл, style.css, в котором нет необходимости.

Настройка нашего индексного файла

Тип '! (восклицательный знак)» и нажмите Tab. VSCode автоматически создаст наш HTML-файл.

Напишите Приложение Click Counter в заголовке для серьезного взгляда, добавьте заголовок и откройте с помощью действующего сервера, и мы готовы к работе.

Подготовка нашего HTML

Для счетчика кликов нам понадобится 2 элемента.

  1. Элемент (текст), показывающий, сколько раз была нажата кнопка.
  2. Элемент (кнопка), вызывающий событие (щелчок)
<p>The button has been clicked <span id="counter">0</span> times!</p>
<button id="triggerButton">Click Me to Trigger an Event</button>

Обратите внимание, что мы добавили id к обоим счетчикам span и button. Они понадобятся нам для таргетинга из нашего JS-файла.
И в качестве последнего шага давайте свяжем наш JS-файл с нашим файлом index.html непосредственно перед закрывающим тегом body.

<script src="./main.js"></script>

Ориентация на наши элементы

Чтобы начать обновление и прослушивание триггерного события, сначала нам нужно настроить таргетинг на наши элементы. В предыдущем разделе мы добавили ids к обоим счетчикам span и button. Мы будем использовать их для нацеливания на эти элементы.

window.addEventListener('load', () => {
  const counter = document.querySelector('#counter')
  const triggerButton = document.querySelector('#triggerButton')
})

Обратите внимание, что мы обернули наш код внутри window.addEventListener('load', handlerFunction). Лучше всего поместить туда наши коды, чтобы наш JS запускался только после загрузки всего окна.

Прослушивание события и обновление DOM

Теперь, когда мы успешно нацелились на наши элементы, нам нужно сделать две вещи:

  1. Прослушивание события клика (триггера) на кнопке
  2. Добавить в счетчик

Шаг 1. Прослушайте событие клика

Есть несколько событий, которые отправляются, когда мы взаимодействуем с веб-страницей. Полный список событий можно найти в разделе Событие — WebAPI | МДН документы. В нашем случае нам нужно только событие click.
После нацеливания на button:

triggerButton.addEventListener('click', () => {})

Внутри Анонимных функций JavaScript мы напишем наш код.

Шаг 2: Добавьте к счету

Внутри нашего обработчика событий щелчка нам нужно прочитать значение текущего состояния счетчика. Мы можем сделать это:

console.log(counter.textContent)

Теперь, если мы нажмем на счетчик, мы увидим состояние счетчика на нашей консоли.

Все, что нам осталось сделать, это просто добавить к счетчику.

counter.textContent += 1

Обратите внимание, что если мы нажмем на кнопку, мы получим:

что не то, что мы хотели. Проблема здесь в том, что JS обрабатывает textContent счетчика как строку, поэтому добавление к нему 1 просто добавляет еще один символ. Чтобы решить эту проблему, нам нужно использовать функцию parseInt, которая преобразует строку в эквивалентное целое число.

Давайте обновим наш код до:

counter.textContent = parseInt(counter.textContent) + 1

и теперь, если мы нажмем кнопку, мы увидим, что она успешно отображает желаемый результат.

И поздравляем! Мы успешно увеличили счетчик на основе кликов. Весь наш JS-файл теперь выглядит так:

window.addEventListener('load', () => {
  const counter = document.querySelector('#counter')
  const triggerButton = document.querySelector('#triggerButton')
  
  triggerButton.addEventListener('click', () => {
    counter.textContent = parseInt(counter.textContent) + 1
  })
})

Теперь просто добавьте немного стиля, чтобы сделать его менее скучным, напишите немного CSS и вуаля!

Удачного кодирования.