在外觀中添加onlick事件偵聽器不起作用js

Question

這是我的項目html樣子：

<div class="content__products__item" id="item1">
   <div class="content__products__item__picture">
      <a href="#"><img src="images/product-tea1.jpg"></a>
   </div>
   <div class="content__products__item__section">green tea</div>
   <div><a href="#" class="content__products__item__name">Loan si</a></div>
   <div class="content__products__item__price">
      <span>3.45</span> r
   </div>
   <div class="content__products__item__quantity clearfix">
      <button class="quantity-arrow-minus">-</button>
      <div class="quantity-num"><span>50</span> г</div>
      <button class="quantity-arrow-plus">+</button>
      <button class="quantity-add-to-basket">В корзину</button>
   </div>
   <div class="content__products__item__description-wraper">
      <div class="content__products__item__description">
         Good tea Good teaGood teaGood teaGood tea
      </div>
   </div>
</div>

我在html標記中的每個項目上添加id ，然后我用javascript提取所有項目，並嘗試在每個項目上添加onclick事件，但是idk為什么當我在任何項目上按我的每個加減按鈕時，它只會更改最后一項的值。

var items = document.querySelectorAll('.content__products__item');

for (var i = 1; i < items.length; i++) {
    var btnMinus = document.querySelector('#item' + i + ' .quantity-arrow-minus');
    var btnPlus = document.querySelector('#item' + i + ' .quantity-arrow-plus');
    var input = document.querySelector('#item' + i + ' .quantity-num span');
    var currentPrice = document.querySelector('#item' + i + ' .content__products__item__price span');
    var pricePerGram = currentPrice.textContent / 50;
    btnPlus.onclick = function (e) {
        input.textContent = +input.textContent + 50;
        currentPrice.textContent = (+input.textContent * pricePerGram).toFixed(2);
    }
    btnMinus.onclick = function (e) {
        if (input.textContent > 50) {
            input.textContent = +input.textContent - 50;
            currentPrice.textContent = (+input.textContent * pricePerGram).toFixed(2);
        }
    }
}

請幫忙！

Answer 1

好的，我這樣做是這樣的：

var items = document.querySelectorAll('.content__products__item');

  items.forEach(function(item, i) {
    var btnMinus = document.querySelector('#item' + n + ' .quantity-arrow-minus');
    var btnPlus = document.querySelector('#item' + n + ' .quantity-arrow-plus');
    var input = document.querySelector('#item' + n + ' .quantity-num span');
    var currentPrice = document.querySelector('#item' + n + ' .content__products__item__price span');
    var pricePerGram = currentPrice.textContent / 50;
    btnPlus.onclick = function(e) {
      input.textContent = +input.textContent + 50;
      currentPrice.textContent = (+input.textContent * pricePerGram).toFixed(2);
    }
     btnMinus.onclick = function(e) {
       if(input.textContent > 50) {
       input.textContent = +input.textContent - 50;
      currentPrice.textContent = (+input.textContent * pricePerGram).toFixed(2);
       }
    }
  });

現在效果很好！