В нашей предыдущей главе: Управление DOM: управление элементами HTML с помощью Javascript мы узнали, как ориентироваться на элементы и обновлять их с помощью JS. В этой главе мы создадим счетчик кликов, используя эти навыки.
Начиная с нуля
Создайте новую папку, назовем ее click-counter. Щелкните правой кнопкой мыши эту папку и выберите Открыть с помощью кода. После того, как папка откроется в VSCode, мы создадим здесь два файла:
- index.html
- main.js
мы создадим третий файл, style.css, в котором нет необходимости.
Настройка нашего индексного файла
Тип '! (восклицательный знак)» и нажмите Tab. VSCode автоматически создаст наш HTML-файл.
Напишите Приложение Click Counter в заголовке для серьезного взгляда, добавьте заголовок и откройте с помощью действующего сервера, и мы готовы к работе.
Подготовка нашего HTML
Для счетчика кликов нам понадобится 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. Прослушайте событие клика
Есть несколько событий, которые отправляются, когда мы взаимодействуем с веб-страницей. Полный список событий можно найти в разделе Событие — 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 и вуаля!
Удачного кодирования.