Создайте простой счетчик кликов с помощью JavaScript

  1. Счетчик кликов на кнопке с использованием JavaScript
  2. Счетчик кликов в div с использованием JavaScript
  3. Счетчик кликов - беспрепятственный подход
  4. Замечания

Счетчик кликов записывает количество кликов и отображает его на экране. Счетчик использует событие click JavaScript для увеличения значения счетчика. Мы можем использовать его в различных областях, в том числе в играх (для увеличения количества очков или очков) и в некоторых хаках для экономии времени. Давайте посмотрим на код для создания простого счетчика кликов в JavaScript.

Счетчик кликов на кнопке с использованием JavaScript

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <button onclick="incrementClick()">Click Me</button>
        <button onclick="resetCounter()">Reset</button>
    </div>
</center>
var counterVal = 0;

function incrementClick() {
    updateDisplay(++counterVal);
}

function resetCounter() {
    counterVal = 0;
    updateDisplay(counterVal);
}

function updateDisplay(val) {
    document.getElementById("counter-label").innerHTML = val;
}

В коде мы увеличиваем значение переменной счетчика counterVal на 1 при каждом нажатии пользователем. Шаги следующие.

  • Мы создаем отображение счетчика в HTML с тегом <h3> и назначаем ему идентификатор counter-label, чтобы его можно было обновить из кода javascript с помощью document.getElementById() функция в javascript.
  • В HTML мы также добавляем пару кнопок. Одна кнопка с текстом Click Me, при нажатии на которую значение счетчика увеличивается на 1. Точно так же в другой кнопке у нас есть текст Reset в HTML, который сбрасывает счетчик на 0.
  • При нажатии кнопки кликни меня нам нужно увеличить значение счетчика. Для этого мы используем прослушиватель событий onclick. И вызовите функцию incrementClick() нажатием кнопки Click Me.
  • Внутри функции incrementClick() мы увеличиваем глобальную переменную counterVal на 1 и вызываем функцию updateDisplay.
  • При нажатии кнопки Сброс вызываем функцию resetCounter(). В этой функции мы сбрасываем значение глобального счетчика (counterVal) на 0 и вызываем функцию updateDisplay().
  • В функции updateDisplay() мы отображаем полученное значение как параметр в теге <h3>, который содержит значение счетчика. Он использует функцию javascript document.getElementById() для запроса элемента HTML с идентификатором counter-label, а затем обновляет атрибут innerHTML с новым значением счетчика. Атрибут innerHTML дополнительно изменяет текст, отображаемый в интерфейсе графического пользовательского интерфейса HTML.

В приведенном выше примере кода отображается счетчик кликов, который увеличивается при нажатии кнопки. В большинстве случаев мы не всегда можем применять счетчик кликов к кнопке. Чтобы сделать его гибким, нам нужно будет поддерживать эту функцию для других элементов HTML, таких как div, li и т. Д. Почти все элементы HTML имеют событие click с обработчиком события onclick.

Счетчик кликов в div с использованием JavaScript

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

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <div onclick="incrementClick()">Click Me</div>
        <button onclick="resetCounter()">Reset</button>
    </div>
</center>
var counterVal = 0;

function incrementClick() {
    updateDisplay(++counterVal);
}

function resetCounter() {
    counterVal = 0;
    updateDisplay(counterVal);
}

function updateDisplay(val) {
    document.getElementById("counter-label").innerHTML = val;
}

Вы можете заметить, что в этом примере мы использовали div в строке <div onclick="incrementClick()">Click Me</div>. С этим изменением incrementClick() запускается по щелчку div вместо кнопки. Код будет отлично работать с HTML-тегами, такими как <li>, <a>, <div> и т. Д. Почти все HTML-теги, поддерживающие обработчики событий onclick, могут быть связаны с прослушивателем onclick и работать с ними аналогичным образом.

Счетчик кликов - беспрепятственный подход

Если мы реализуем счетчик кликов с беспрепятственным подходом в JavaScript, нам нужно будет удалить обработчик событий onclick в HTML и переместить его в код JavaScript. Однако структура кода выглядит немного иначе, обратите внимание на следующий пример кода.

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <div id="click-div">Click Me</div>
        <button id="reset-button">Reset</button>
    </div>
</center>
window.onload = function () {
    let clickDiv = document.getElementById("click-div");
    clickDiv.onclick = incrementClick;

    let resetBtn = document.getElementById("reset-button");
    resetBtn.onclick = resetCounter;
}

var counterVal = 0;

incrementClick = function() {
    updateDisplay(++counterVal);
}

function resetCounter() {
    counterVal = 0;
    updateDisplay(counterVal);
}

function updateDisplay(val) {
    document.getElementById("counter-label").innerHTML = val;
}

Здесь мы привязываем события щелчка к коду JavaScript. Структура осталась прежней, за исключением того, что мы используем прослушиватель onclick для div Click Me и кнопки Reset. Эта привязка происходит во время выполнения. И к этому прослушивателю кликов мы привязываем наши определенные функции. Таким образом, код выглядит похожим и не претерпел особых изменений.

Замечания

Разница между беспрепятственным подходом состоит в том, что мы привязываем прослушиватель onclick в коде javascript, а не делаем это в HTML. Из одного только HTML будет сложно понять, если кнопке или div назначен обработчик события onclick.

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

Код не будет работать, если мы не установим прослушиватель onclick в функции window.onload. Код document.getElementById("click-div") вернет null, так как не сможет найти HTML-элемент. Функция wondow.onload запускается после загрузки окна и готовности DOM. Следовательно, размещение кода внутри блока window.onload гарантирует, что элемент HTML загружен и может быть запрошен с помощью функции JavaScript document.getElementById().