Javascript 加/减数量字段

我正在尝试在我的4种不同的产品模型上实现加法/减法功能。它有如下相同的类名

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default btn-subtract" type="button">-</button>
    </span>
    <input type="text" class="form-control no-padding text-center item-quantity" value="1">
    <span class="input-group-btn">
         <button class="btn btn-default btn-add" type="button">+</button>
    </span>
</div>

---

但是，它在输入字段中没有显示任何内容。有什么建议吗？

问题是您的选择器坏了，无法使用输入字段的textContent属性更改其值。下面的代码应该可以做到这一点：

var minus = document.querySelector(".btn-subtract")
var add = document.querySelector(".btn-add");
var quantityNumber = document.querySelector(".item-quantity");
var currentValue = 1;

minus.addEventListener("click", function(){
    currentValue -= 1;
    quantityNumber.value = currentValue;
    console.log(currentValue)
});

add.addEventListener("click", function() {
    currentValue += 1;
    quantityNumber.value = currentValue;
    console.log(currentValue);
});

---

问题是您的选择器不正确，无法使用输入字段的textContent属性更改其值。下面的代码应该可以做到这一点：

var minus = document.querySelector(".btn-subtract")
var add = document.querySelector(".btn-add");
var quantityNumber = document.querySelector(".item-quantity");
var currentValue = 1;

minus.addEventListener("click", function(){
    currentValue -= 1;
    quantityNumber.value = currentValue;
    console.log(currentValue)
});

add.addEventListener("click", function() {
    currentValue += 1;
    quantityNumber.value = currentValue;
    console.log(currentValue);
});

---

不正确的查询。你错过了

var minus = document.querySelector(".btn-subtract")
var add = document.querySelector(".btn-add");
var quantityNumber = document.querySelector(".item-quantity");

---

不正确的查询。你错过了

var minus = document.querySelector(".btn-subtract")
var add = document.querySelector(".btn-add");
var quantityNumber = document.querySelector(".item-quantity");

---

除了不正确的元素查询之外，这里还有一些其他问题：

要选择CSS类，请在类名称前使用点：例如，btn减号 要获取或设置输入控件的值，请使用其value属性：quantityNumber.value+=1偶数递减/递增：例如quantityNumber.value++ 如果您首先将变量currentValue设置为常数！1并在de-/increment中使用，则状态与UI无关。用户可能首先在输入字段中输入5，然后在侦听器更改为1+1=2时单击加号按钮。 用于引用表单控件的CSS类可以独立于当前上下文在所有控件上工作。如果您有特定于产品的数量，那么用例可能是为不同的产品/订单行输入不同的数量。因此，使用元素ID可能是另一种选择。 已经有了一个HTML，它支持这些操作，包括递增/递减和最小/最大。请参见下面示例中的B 可能存在最小数量，例如允许0：使用HTML输入字段的最小属性和/或条件减号按钮 //产品A var减法=document.queryselect或product\u A\u form.btn减法 var add_A=document.queryselector产品_A_form.btn add； var quantity_A=document.queryselector产品_A_表单.物料数量； 减A.addEventListenerclick，函数{ 数量值-； }; 添加A.AddEventListener单击，函数{ 量值++； }; //产品B var减法=document.queryselector产品表单.btn减法 var add_B=document.queryselector产品_B_form.btn add； var quantity_B=document.queryselect或Product_B_form.物料数量； //包括按钮减去禁用（如果最小值或更低） 常数最小值=0； 减B.addEventListenerclick，函数{ 如果数量为最小值{ 减B.disabled=false； } 量值++； }; A. - + B - +

---

除了不正确的元素查询之外，这里还有一些其他问题：

要选择CSS类，请在类名称前使用点：例如，btn减号 要获取或设置输入控件的值，请使用其value属性：quantityNumber.value+=1偶数递减/递增：例如quantityNumber.value++ 如果您首先将变量currentValue设置为常数！1并在de-/increment中使用，则状态与UI无关。用户可能首先在输入字段中输入5，然后在侦听器更改为1+1=2时单击加号按钮。 用于引用表单控件的CSS类可以独立于当前上下文在所有控件上工作。如果您有特定于产品的数量，那么用例可能是为不同的产品/订单行输入不同的数量。因此，使用元素ID可能是另一种选择。 已经有了一个HTML，它支持这些操作，包括递增/递减和最小/最大。请参见下面示例中的B 可能存在最小数量，例如允许0：使用HTML输入字段的最小属性和/或条件减号按钮 //产品A var减法=document.queryselect或product\u A\u form.btn减法 var add_A=document.queryselector产品_A_form.btn add； var quantity_A=document.queryselector产品_A_表单.物料数量； 减A.addEventListenerclick，函数{ 数量值-； }; 添加A.AddEventListener单击，函数{ 量值++； }; //产品B var减法=document.queryselector产品表单.btn减法 var add_B=document.queryselector产品_B_form.btn add； var quantity_B=document.queryselect或Product_B_form.物料数量； //包括按钮减去禁用（如果最小值或更低） 常数最小值=0； 减B.addEventListenerclick，函数{ 如果数量为最小值{ 减B.disabled=false； } 量值++； }; A. - + B - +

---

没有一个查询选择器是正确的。如果要按类选择，则需要一个类名。点在i Martin前面，将quantityNumber.textContent替换为quantityNumber.Value您的查询选择器都不正确。如果要按类选择，则需要一个类名。点在I Martin前面，将quantityNumber.textContent替换为quantityNumber.Value谢谢。它确实起作用了，但我忽略了它。在查询选择器中。但是，它只在第一个模式下工作，第二、第三和第四个模式的按钮不起作用。有什么想法吗\你可以用。。。你的意思是不能，我想：-再试一次，我改变了它

---

哦，@ADyson你是对的-我想说你不能：-谢谢。它确实起作用了，但我忽略了它。在查询选择器中。但是，它只在第一个模式下工作，第二、第三和第四个模式的按钮不起作用。有什么想法吗\你可以用。。。你的意思是不能，我想：-再试一次，我现在改变了它，@ADyson你是对的-我想说你不能：-谢谢。它确实可以工作，但是，我需要具有相同类的其他模态也可以工作，我应该在循环中添加函数吗？-检查这个，如果我理解你的意思，谢谢。它确实可以工作，但是，我需要具有相同类的其他模态也可以工作，我应该在循环中添加函数吗？-检查这个，如果我理解你的话。非常感谢！此外，如何重置输入数量，以便在关闭模式时，它将返回默认值1非常感谢你！此外，如何重置输入数量，以便在关闭模式时，它将返回默认值1