Независимые счетчики

Question

Подскажите, пожалуйста, как сделать данные счетчики независимыми?

    let counters = document.querySelector('.counter')
    let text = document.querySelector('.counter__text')
    let counterBtn = document.querySelector('.counter__btn')
    let count = 0;

    counterBtn.addEventListener('click', function() {
        count ++;
        text.innerText = count;
    })

<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>

<body>
  <div class="counter">
      <div class="counter__text">0</div>
      <button class="counter__btn">Click</button>
  </div>
  <div class="counter">
      <div class="counter__text">0</div>
      <button class="counter__btn">Click</button>
  </div>
  </body>

Answer 1

Насколько я понял, вам нужно, чтоб работали оба счетчика, увеличиваясь по нажатию соответствующих кнопок.

Ниже работающий код. Несколько замечаний по поводу реализации такой задачи:

во-первых,querySelector() выбирает лишь первый элемент, вам нужен querySelectorAll() - он выберет сразу все кнопки и соберёт их в массив. По этому массиву можно пройти с помощью итератора.
вам не нужна переменная count, так как сам счетчик уже содержит информацию о том, какая в нем цифра. Достаточно просто получить innerText счетчика и прибавить к нему 1. Заметьте, также, что я пишу +text[index].innerText, чтобы конвертировать текстовое значение - в числовое (иначе произойдет не сложение, а конкатенация)
Поскольку к каждой кнопке привязан свой счетчик, каждую кнопку нужно обработать отдельно. Что я и сделал с помощью forEach добавив eventListener к каждой кнопке, последовательно. Удобство такого кода заключается простой масштабируемости: вы можете в HTML поставить сколько угодно счётчиков, при том без какой-либо нужды менять сам JavaScript

var text = document.querySelectorAll('.counter__text');
var counterBtn = document.querySelectorAll('.counter__btn');

counterBtn.forEach(function(btn, index) {
  btn.addEventListener('click', function() {
    text[index].innerText = +text[index].innerText + 1;
  })
})

<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>

<body>
  <div class="counter">
    <div class="counter__text">0</div>
    <button class="counter__btn">Click</button>
  </div>
  <div class="counter">
    <div class="counter__text">0</div>
    <button class="counter__btn">Click</button>
  </div>
</body>

БЛОГ НА HUSL

Независимые счетчики

Ответы (1 шт):