为了账号安全,请及时绑定邮箱和手机立即绑定

购物车增量和减量值 JS

购物车增量和减量值 JS

POPMUISE 2022-10-13 16:11:46
我正在尝试增加和减少购物车中的值。我首先通过定位一个 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;}
查看完整描述

3 回答

?
函数式编程

TA贡献1807条经验 获得超9个赞

getElementsByClassName 返回集合。

相反document.getElementsByClassName('number').value,您需要使用document.getElementsByClassName('number')[0].value


查看完整回答
反对 回复 2022-10-13
?
GCT1015

TA贡献1827条经验 获得超4个赞

代替 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;

    }

}


查看完整回答
反对 回复 2022-10-13
?
慕莱坞森

TA贡献1810条经验 获得超4个赞

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;

}  


查看完整回答
反对 回复 2022-10-13
  • 3 回答
  • 0 关注
  • 112 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号