Создание кнопки подсчета в JavaScript

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

Метод 1: использование глобальной переменной-счетчика

<button id="countButton">Click to Count</button>
<p id="countDisplay">Count: 0</p>
<script>
  var count = 0;
  var countButton = document.getElementById("countButton");
  var countDisplay = document.getElementById("countDisplay");
  countButton.addEventListener("click", function() {
    count++;
    countDisplay.textContent = "Count: " + count;
  });
</script>

Метод 2: использование атрибута данных HTML

<button id="countButton" data-count="0">Click to Count</button>
<p id="countDisplay">Count: 0</p>
<script>
  var countButton = document.getElementById("countButton");
  var countDisplay = document.getElementById("countDisplay");
  countButton.addEventListener("click", function() {
    var count = parseInt(countButton.getAttribute("data-count"));
    count++;
    countButton.setAttribute("data-count", count);
    countDisplay.textContent = "Count: " + count;
  });
</script>

Метод 3. Использование замыкания

<button id="countButton">Click to Count</button>
<p id="countDisplay">Count: 0</p>
<script>
  var countButton = document.getElementById("countButton");
  var countDisplay = document.getElementById("countDisplay");
  var count = (function() {
    var counter = 0;
    return function() {
      counter++;
      countDisplay.textContent = "Count: " + counter;
    };
  })();
  countButton.addEventListener("click", count);
</script>

Метод 4. Использование класса ES6

<button id="countButton">Click to Count</button>
<p id="countDisplay">Count: 0</p>
<script>
  class Counter {
    constructor() {
      this.count = 0;
    }
    increment() {
      this.count++;
      countDisplay.textContent = "Count: " + this.count;
    }
  }
  var countButton = document.getElementById("countButton");
  var countDisplay = document.getElementById("countDisplay");
  var counter = new Counter();
  countButton.addEventListener("click", function() {
    counter.increment();
  });
</script>

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