Javascript 带按钮的加减乘积

我编写了一个代码来模拟购物车，通过使用+-按钮添加/删除产品，解决了代码工作正常但只对一种产品有效的问题，我希望代码对所有产品有效

代码如下：

const minusButton=document.querySelector'.减去btn'； const plusButton=document.querySelector'.plus btn'； const inputField=document.querySelector'.input btn'； minusButton.addEventListener'click'，函数minusProduct{ const currentValue=NumberinputField.value； 如果当前值>0{ inputField.value=当前值-1； }当前值=0 }; plusButton.addEventListener'click'，函数plusProduct{ const currentValue=NumberinputField.value； inputField.value=当前值+1； };

---

您需要对每个.quantity组执行代码所执行的操作

但是html中有几个错误

您尝试访问未应用于任何元素的.input btn 当您应该尝试将输入字段设置为0时，在声明常量后尝试将currentValue设置为0 您对每个.quantity组的按钮/输入使用相同的id，这是无效的。 所以

常量数量=document.queryselectoral.quantity'； […数量].forEachfunctionquantity{ const minusButton=数量.querySelector'.减去btn'； const plusButton=数量.querySelector'.加上btn'； const inputField=quantity.querySelector'.input btn'； minusButton.addEventListener'click'，函数minusProduct{ const currentValue=NumberinputField.value； 如果当前值>0{ inputField.value=当前值-1； }else inputField.value=0 }; plusButton.addEventListener'click'，函数plusProduct{ const currentValue=NumberinputField.value； inputField.value=当前值+1； }; }; 问题是querySelector只返回第一个匹配项。相反，您需要所有匹配项并在该列表上迭代，向每个匹配项添加单击侦听器。使用querySelectorAll查找元素，然后使用简单的for循环对其进行迭代：

const minusButtons=document.querySelectorAll'.减去btn'； const plusButtons=document.queryselectoral'.plus btn'； const inputFields=document.querySelectorAll'.quantity input'； 对于let i=0；i.长度；i++{ minusButtons[i]。添加了“单击”列表，函数minusProduct{ 如果输入字段[i]。值{ 输入字段[i]。值-； } }; } 对于let i=0；i.长度；i++{ plusButtons[i]。添加了“单击”列表，函数plusProduct{ 输入字段[i]。值++； }; } .plus btn：：之前{ 内容：+； } .减去btn：：之前{ 内容：-； }

---

对代码做了一些整理，将ID更正为类，因为不能使用重复的ID。 还添加了一个listenfordocumentload，以确保在页面准备就绪之前不会触发代码。 更改为远离querySelector，因为此仅获取第一个元素可以更改回输入方法

//无法使用querySelector，它只返回第一个元素 //注意：我们必须通过按钮，这允许我们获得 //并限制我们的搜索范围。 常量输入字段=按钮=>{ return按钮.parentElement.getElementsByClassName'input'[0]； }; //使用此初始值设定项确保文档已准备就绪 //搜索和添加事件侦听器 document.addEventListener'DOMContentLoaded'，函数{ 设置按钮； 设置按钮； }; //使用一种常用的方法来分配我们的点击次数 功能设置按钮按钮，事件操作{ forlet i=0；i=0{ iField.value=当前值-1； }当前值=0 }; } 功能设置按钮{ let buttons=document.getElementsByClassName'plus-btn'； 设置按钮按钮， 函数plusProductevent{ let button=event.target； 让iField=inputFieldbutton； const currentValue=numberfield.value； i字段值=当前值+1； }; }

---

代码在哪里？我现在加上去了。为什么不使用JQuery？很抱歉，你的代码太乱了。。。我建议只在点击时调用一个函数，将项目id作为参数，就是这样…@AriWaisberg为什么要使用一个90 kB的库来实现一些没有任何外部依赖的东西？@AriWaisberg不，不是这样，代码也不是很乱。它只是格式不好。谢谢你的出色工作和推荐。很好的解决方案，但值得指出的是，有些浏览器的NodeList不支持forEach。@connexo fair point，更新了使用数组的代码。for const quantity of Quantilities在IE 11中工作，不需要多边形填充，也不需要巴别林。