Значения увеличения и уменьшения корзины JS

Question

Я пытаюсь увеличивать и уменьшать значения в тележке. Сначала я реализовал его, указав идентификатор, и мой код js работал. Но потом я понял, что у меня будет несколько товаров в корзине, поэтому я не смогу настроить таргетинг на идентификаторы, поэтому я изменил getElementById на getElementsByClassName, но код js больше не работает. Как я могу решить эту проблему?

<div class="quantity">
 <form>
   <div class="value-button" class="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
     <input type="number" class="number" value="1" />
   <div class="value-button" class="increase" onclick="increaseValue()" value="Increase Value">+</div>
 </form>
</div>

JS

// Increase Value // 
function increaseValue() {
      var value = parseInt(document.getElementsByClassName('number').value, 10);
      value = isNaN(value) ? 1 : value;
      value++;
      document.getElementsByClassName('number').value = value;
}
    
// Decrease Value // 
function decreaseValue() {
      var value = parseInt(document.getElementsByClassName('number').value, 10);
      value = isNaN(value) ? 0 : value;
      value < 1 ? value = 1 : '';
      value--;
      document.getElementsByClassName('number').value = value;
}  

Мой предыдущий код, который работал

<div class="quantity">
  <form>
   <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
     <input type="number" id="number" value="1" />
   <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
  </form>
</div>

JS

// Increase Value // 
function increaseValue() {
      var value = parseInt(document.getElementById('number').value, 10);
      value = isNaN(value) ? 0 : value;
      value++;
      document.getElementById('number').value = value;
}
    
// Decrease Value // 
function decreaseValue() {
      var value = parseInt(document.getElementById('number').value, 10);
      value = isNaN(value) ? 0 : value;
      value < 1 ? value = 1 : '';
      value--;
      document.getElementById('number').value = value;
}

Answer 1

getElementsByClassName возвращает коллекцию.

Вместо document.getElementsByClassName('number').value вам нужно использовать document.getElementsByClassName('number')[0].value

Answer 2

Вместо onclick в html используйте addEventListener. Например, у вас есть какое-то количество.

<div class="quantity">
 <form>
   <div class="value-button" class="decrease" value="Decrease Value">-</div>
     <input type="number" class="number" value="1" />
   <div class="value-button" class="increase" value="Increase Value">+</div>
 </form>
</div>
<div class="quantity">
 <form>
   <div class="value-button" class="decrease" value="Decrease Value">-</div>
     <input type="number" class="number" value="1" />
   <div class="value-button" class="increase" value="Increase Value">+</div>
 </form>
</div>
<div class="quantity">
 <form>
   <div class="value-button" class="decrease" value="Decrease Value">-</div>
     <input type="number" class="number" value="1" />
   <div class="value-button" class="increase" value="Increase Value">+</div>
 </form>
</div>

let quantities = document.getElementsByClassName('quantity');
for (let i=0; i<quantities.length; i++) {
    let q = quantities[i];
    let increaseElement = q.getElementsByClassName('increase')[0];
    increaseElement.addEventListener('click', increaseValue, false);

    function increaseValue() {
      var value = parseInt(q.getElementsByClassName('number')[0].value, 10);
      value++;
      q.getElementsByClassName('number')[0].value = value;
    }
}

Answer 3

getElementsByClassName возвращает HTMLCollection; вам нужно перебрать это и установить значение для каждого содержащегося элемента индивидуально, а не пытаться установить значение самого HTMLCollection.

Или просто используйте querySelector , например:

// Increase Value // 
function increaseValue() {
      var value = parseInt(document.querySelector('.number').value, 10);
      value = isNaN(value) ? 1 : value;
      value++;
      document.querySelector('.number').value = value;
}
    
// Decrease Value // 
function decreaseValue() {
      var value = parseInt(document.querySelector('.number').value, 10);
      value = isNaN(value) ? 0 : value;
      value < 1 ? value = 1 : '';
      value--;
      document.querySelector('.number').value = value;
}