Создание простого счетчика с помощью HTML/JavaScript

Вступление

Недавно я завершил свой первый проект в Flatiron School, которым очень горжусь! Не стесняйтесь прочитать о нем подробнее здесь. Во время рассмотрения моего проекта мне было дано задание по кодированию в реальном времени. Задача была проста: добавить счетчик в DOM, который будет прибавлять 1 к числу при нажатии на кнопку.

Звучит просто, верно? Особенно после завершения довольно большого проекта. Но, к сожалению, это вызвало у меня небольшие затруднения. Я довольно быстро понял, из каких частей состоит решение, но собрать их вместе на месте оказалось непросто.

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

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

После окончания Flatiron мне определенно придется кодить перед людьми, объясняя при этом ход своих мыслей — это будет происходить на каждом собеседовании по программированию. Это была моя первая попытка понять, каково это, хотя эта задача была намного проще, чем любое собеседование.

Это была отличная практика, а практика делает совершенным.

Итак, сегодня давайте поговорим о задаче, которую мне поставили, и о том, как ее решить. Надеюсь, кто-то наткнется на этот пост в трудную минуту!

Задача

Вот что нужно было сделать:

  • Добавить кнопку на веб-страницу
  • Добавить счетчик на страницу
  • Когда кнопка нажата, добавить 1 к счетчику.

Мне было разрешено ввести число 0 для начала упражнения.

Кусочки

Итак, как мы можем разбить это на шаги, которые нам нужно предпринять для решения проблемы? Вот как я разбил ее на части:

  1. Нам нужно создать кнопку в HTML
  2. Нам также нужно создать место для счетчика в HTML.
  3. Мы добавим слушатель событий, чтобы связать JavaScript, который мы собираемся написать, с HTML.
  4. Нам понадобится событие JS click для запуска счетчика.
  5. При нажатии мы обновим счетчик.

HTML

В нашем файле index.html мы начнем со следующих действий, которые являются гораздо более подробными в отношении первых двух пунктов выше.

  1. В теле нашего HTML создайте div для размещения всего содержимого
  2. Создайте кнопку
  3. Напишите текст для описания нашего номера
  4. Создайте span с идентификатором «counter», чтобы мы могли сохранить его как переменную в нашем файле index.js.
  5. Включите наше начальное число 0

ПРИМЕЧАНИЕ: Я не буду описывать это здесь для простоты, но в вашем HTML-файле не забудьте ваш шаблон HTML и указать на ваш JavaScript-файл!

Вот как выглядят приведенные выше шаги HTML:

    <div>
      <button type="button">Click Me!</button>
      Number of Clicks: <span id="counter">0</span>
    </div>
Вход в полноэкранный режим Выход из полноэкранного режима

JavaScript

Далее нам нужно добавить часть JavaScript. Она состоит из шагов 2 — 6 в разделе «Детали» выше. Более подробно, вот что мы будем делать:

  1. Создайте переменную для HTML-кнопки
  2. Создать переменную для счетчика HTML
  3. Добавим слушатель событий, чтобы иметь возможность отслеживать нажатие на кнопку, а затем использовать функцию обратного вызова для…
  4. Добавить 1 к существующему числу

Сначала нам нужно сохранить ссылку на кнопку из нашего HTML в JavaScript. Я использовал querySelector, чтобы найти кнопку по ее атрибуту «type». Затем я добавил слушатель событий в переменную кнопки:

const button = document.querySelector("button")

Далее нам нужно сохранить счетчик как переменную, чтобы мы могли увеличивать его при нажатии на кнопку. Вместо того чтобы использовать querySelector, давайте сохраним эту переменную с помощью getElementById:

const counter = document.getElementById("counter")

Далее я добавил слушатель событий для этой кнопки:

button.addEventListener("click", () => clickHandler())

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

Первое, что я попытался сделать, это взять число внутри счетчика, используя свойство innerHTML, и добавить к нему 1, что выглядело следующим образом:

function clickHandler() {
  counter.innerHTML + 1
  console.log(counter)
}
Вход в полноэкранный режим Выход из полноэкранного режима

Проблема в том, что число, которое я пытаюсь увеличить, 0, на самом деле не является целым числом (цифрой). Я выяснил это с помощью оператора typeof:

console.log(typeof counter.innerHTML)

Оказалось, что число 0, которое я добавил в HTML, на самом деле было строкой. Поэтому, когда я пытался добавить к ней 1, ничего не получалось, потому что типы данных не совпадали.

Решение более элегантно, поскольку решает сразу две проблемы. Оно будет использовать классический оператор инкремента (++) и в то же время будет преобразовывать строку «0» в целое число, устраняя несоответствие данных! Новая функция будет выглядеть следующим образом:

function clickHandler() {
  counter.innerHTML++
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Попробуйте сами!

Пока мы здесь, давайте посмотрим, как мы можем еще немного упростить эту задачу.

Рефактор

Мы можем рефакторить эту трехстрочную функцию в однострочную стрелочную функцию:

const clickHandler = () => counter.innerHTML++

Отлично! Это все еще работает и сокращает наш код, не делая его более трудным для чтения. Но можем ли мы пойти еще дальше?

Конечно, можем.

Помните созданный нами слушатель событий, который выглядел следующим образом?

button.addEventListener("click", () => clickHandler())

Так вот, поскольку мы смогли сократить нашу функцию до одной строки кода, мы можем просто продолжить и выполнить действие функции непосредственно в самом слушателе событий! Вот как это выглядит, когда вы редактируете слушатель событий для немедленного выполнения этого действия:

button.addEventListener("click", () => counter.innerHTML++)

Конечный продукт

Теперь мы успешно создали функциональную кнопку-счетчик, с которой наши пользователи могут взаимодействовать в DOM примерно в 10 строках кода, включая HTML и JavaScript (за вычетом кодового шаблона)!

Чтобы просмотреть, как выглядит окончательный код в целом, смотрите ниже!

HTML тело:

  <body>
    <div>
      <button type="button">Click Me!</button>
      Number of Clicks: <span id="counter">0</span>
    </div>
    <script src="./index.js"></script>
  </body>
Вход в полноэкранный режим Выход из полноэкранного режима

JavaScript:

const button = document.querySelector("button")
const counter = document.getElementById("counter")
button.addEventListener("click", () => counter.innerHTML++)
Войти в полноэкранный режим Выход из полноэкранного режима

Демонстрация Gif:

Я надеюсь, что этот пост был полезен вам в вашем путешествии по кодингу, не стесняйтесь обращаться, если у вас есть какие-либо вопросы или комментарии. 🙂

-Trevor

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *