购物车增量和减量值 JS

Question

我正在尝试增加和减少购物车中的值。我首先通过定位一个 id 来实现它，并且我的 js 代码有效。但后来我意识到我将在购物车中有多个项目，所以我将无法定位 ID，所以我从 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

代替 html 中的 onclick 使用 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;

}