购物车增量和减量值 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">&nbsp;<form>&nbsp; &nbsp;<div class="value-button" class="decrease" value="Decrease Value">-</div>&nbsp; &nbsp; &nbsp;<input type="number" class="number" value="1" />&nbsp; &nbsp;<div class="value-button" class="increase" value="Increase Value">+</div>&nbsp;</form></div><div class="quantity">&nbsp;<form>&nbsp; &nbsp;<div class="value-button" class="decrease" value="Decrease Value">-</div>&nbsp; &nbsp; &nbsp;<input type="number" class="number" value="1" />&nbsp; &nbsp;<div class="value-button" class="increase" value="Increase Value">+</div>&nbsp;</form></div><div class="quantity">&nbsp;<form>&nbsp; &nbsp;<div class="value-button" class="decrease" value="Decrease Value">-</div>&nbsp; &nbsp; &nbsp;<input type="number" class="number" value="1" />&nbsp; &nbsp;<div class="value-button" class="increase" value="Increase Value">+</div>&nbsp;</form></div>let quantities = document.getElementsByClassName('quantity');for (let i=0; i<quantities.length; i++) {&nbsp; &nbsp; let q = quantities[i];&nbsp; &nbsp; let increaseElement = q.getElementsByClassName('increase')[0];&nbsp; &nbsp; increaseElement.addEventListener('click', increaseValue, false);&nbsp; &nbsp; function increaseValue() {&nbsp; &nbsp; &nbsp; var value = parseInt(q.getElementsByClassName('number')[0].value, 10);&nbsp; &nbsp; &nbsp; value++;&nbsp; &nbsp; &nbsp; q.getElementsByClassName('number')[0].value = value;&nbsp; &nbsp; }}

Answer 3

getElementsByClassName返回一个HTMLCollection；您需要对其进行迭代并单独设置每个包含元素的值，而不是尝试设置其HTMLCollection本身的值。或者只使用querySelector，如下所示：// Increase Value //&nbsp;function increaseValue() {&nbsp; &nbsp; &nbsp; var value = parseInt(document.querySelector('.number').value, 10);&nbsp; &nbsp; &nbsp; value = isNaN(value) ? 1 : value;&nbsp; &nbsp; &nbsp; value++;&nbsp; &nbsp; &nbsp; document.querySelector('.number').value = value;}&nbsp; &nbsp;&nbsp;// Decrease Value //&nbsp;function decreaseValue() {&nbsp; &nbsp; &nbsp; var value = parseInt(document.querySelector('.number').value, 10);&nbsp; &nbsp; &nbsp; value = isNaN(value) ? 0 : value;&nbsp; &nbsp; &nbsp; value < 1 ? value = 1 : '';&nbsp; &nbsp; &nbsp; value--;&nbsp; &nbsp; &nbsp; document.querySelector('.number').value = value;}&nbsp;&nbsp;