Как подключить счетчик JS на несколько товаров?

#javascript

Есть несколько товаров в интернет-магазине. У каждого должен быть счетчик выбранного
кол-ва. После выгрузки товаров из БД все классы и идентификаторы повторяются, и у меня
выходит взаимодействовать только с одним счетчиком.
Как сделать, чтобы у каждого товара был работающий счетчик?
P.S. Просьба предлагать решения на чистом JS.



var plus = document.querySelectorAll ('.plus');
var minus = document.querySelectorAll('.minus');
var number = document.querySelectorAll('.number');
var i = 0;

plus[i].onclick = up;
function up() {
  var count = Number(number[i].innerHTML);
  number[i].innerHTML = count += 1;
}
minus[i].onclick = down;
function down() {
  var count = Number(number[i].innerHTML);
  number[i].innerHTML = count -= 1;	
}

  

    -
  
  

    1
  
  

    +
  




    

Ответы

Ответ 1

Можно проходить по всем блокам .count и добавлять обработчики клика в рамках конкретного
блока:



function addHandlers(count) {
  var minus = count.querySelector(".minus");
  var number = count.querySelector(".number");
  var plus = count.querySelector(".plus");
  plus.addEventListener("click", function() {
    number.innerText++;
  });
  minus.addEventListener("click", function() {
    number.innerText--;
  });
}

var counts = document.querySelectorAll(".count");
counts.forEach(addHandlers);
.minus, .number, .plus {
  display: inline;
}

  
-
  
1
  
+


  
-
  
1
  
+


  
-
  
1
  
+







ID элементов должны быть уникальны. В данной ситуации вполне можно обойтись только
классами, так что, возможно, стоит отказаться от использования id здесь