Не работает счетчик товаров на чистом JS

167

15 апреля 2018, 23:57

Пробовал через id, но данный метод не подойдет. Ведь счетчиков может быть множество. Попытался через поиск по классам, тоже пока не выходит. Нужна ваша помощь на чистом JS. Не могу понять саму суть, чтобы увеличение товаров работала отдельно для каждой карточки, наверное нужно использовать this или цикл foreach для обработки каждого элемента, пока ещё путаюсь в этом.

var wrapper = document.querySelector('product__col-wrap'); 
var countInput = document.getElementsByClassName('product__col'); 
var minus = document.getElementsByClassName('sprite-minus'); 
var plus = document.getElementsByClassName('sprite-plus'); 
var units = countInput.value.replace(/\d/g, ''); 
 
plus.onclick = function(evt) { 
  evt.preventDefault(); 
  countInput.value = parseInt(countInput.value) + 1 + units; 
}; 
 
minus.onclick = function(evt) { 
  evt.preventDefault(); 
  if (parseInt(countInput.value) > 1) { 
    countInput.value = parseInt(countInput.value) - 1 + units; 
  } 
};

img { 
  max-width: 200px; 
  display: block; 
}

<div class="product__col-wrap" id="product__col-wrap"> 
  <img src="http://cdn.axar.az/2017/04/15/pizza1.jpg" /> 
  <a class="sprite-minus" id="minus" href="">-</a> 
  <input class="product__col" id="count" type="number" value="2"> 
  <a class="sprite-plus" id="plus" href="">+</a> 
</div> 
<div class="product__col-wrap" id="product__col-wrap"> 
  <img src="http://cdn.axar.az/2017/04/15/pizza1.jpg" /> 
  <a class="sprite-minus" id="minus" href="">-</a> 
  <input class="product__col" id="count" type="number" value="2"> 
  <a class="sprite-plus" id="plus" href="">+</a> 
</div>

Answer 1

Лично я бы реализовал так. Не надо использовать ссылки там, где ссылки не нужны. Ссылка это ссылка и использовать надо как ссылку.

Да и еще, очень важное... ID- должен быть на странице единственным и уникальным... Двух ID У одного элемента быть не может. И одинаковых ID у разных элементов тоже

var countInput = document.getElementsByClassName('product__col'); 
var minus = document.getElementsByClassName('sprite-minus'); 
var plus = document.getElementsByClassName('sprite-plus'); 
 
/* почему  у forEach((s, i) два аргумента. аргумент S это аналог THIS, который  
в данном примере не нужен, а вторым аргументом является INDEX элемента, которым 
мы и определяем при нажатии какого элемента значение какого надо изменить 
*/ 
[...document.querySelectorAll('.product__col-wrap')].forEach((s, i) => { 
 
  minus[i].addEventListener('click', function() { 
    if ((countInput[i].innerHTML) * 1 >= 1) { 
      countInput[i].innerHTML = (countInput[i].innerHTML) * 1 - 1; 
    } 
  }); 
 
  plus[i].addEventListener('click', function() { 
    countInput[i].innerHTML = (countInput[i].innerHTML) * 1 + 1; 
  }) 
})

img { 
  max-width: 200px; 
  display: block; 
} 
 
span { 
  cursor: pointer; 
}

<div class="product__col-wrap"> 
  <span class="sprite-minus">-</span> 
  <span class="product__col">2</span> 
  <span class="sprite-plus">+</span> 
</div> 
<div class="product__col-wrap"> 
  <span class="sprite-minus">-</span> 
  <span class="product__col">2</span> 
  <span class="sprite-plus">+</span> 
</div> 
<div class="product__col-wrap"> 
  <span class="sprite-minus">-</span> 
  <!--зачем использовать  input  type="number" если делаем счетчик кастомный?--> 
  <span class="product__col">2</span> 
  <span class="sprite-plus">+</span> 
</div>