Javascript 如何将输入值添加到计数器值？

我试图有一个计数器，可以响应输入值，并将其添加到显示的计数，但继续按1计数。计数从0开始。我让计数器使用按钮，但不使用添加的输入

let decreaseBtn=document.getElementById（“buttonDecrease”）；
让increaseBtn=document.getElementById（“buttonIncrease”）；
让计数器=document.getElementById（“计数器”）；
让inputValue=document.getElementById（“数量”）.inputValue
让计数=0；
decreaseBtn.addEventListener（“单击”，（）=>{
计数--；
counter.innerHTML=计数；
反样式（）；
});
increaseBtn.addEventListener（“单击”，（）=>{
计数++；
counter.innerHTML=计数；
反样式（）；
});
函数counterStyle（）{
如果（计数<0）{
counter.classList.add（“否定”）；
}否则，如果（计数>0）{
counter.classList.add（“肯定”）；
}否则{
counter.classList.remove（“否定”）；
counter.classList.remove（“肯定”）；
}
}
函数addInput（）{
console.log（inputValue）
}
addInput（）
0
-
+
处理单击事件时，您有和运算符。这就是为什么它总是用1加或减，而不是用输入的值。您应该在使用后将输入元素的值添加到可添加的整数中

我正在更改的代码：

count--;

我要把它改成

count -= parseInt(document.getElementById('quantity').value, 10);

我也在为
count++
做同样的事情

此外，您的
counterStyles（）
函数似乎没有适当地删除类，有时您的红色背景中会出现正整数。我通过在这里添加所需的
removeClass（）
调用解决了这个问题

代码的其余部分是相同的


let decreaseBtn=document.getElementById（“buttonDecrease”）；
让increaseBtn=document.getElementById（“buttonIncrease”）；
让计数器=document.getElementById（“计数器”）；
让inputValue=document.getElementById（“数量”）.inputValue
让计数=0；
decreaseBtn.addEventListener（“单击”，（）=>{
count-=parseInt（document.getElementById（'quantity'）。值，10）；
counter.innerHTML=计数；
反样式（）；
});
increaseBtn.addEventListener（“单击”，（）=>{
count+=parseInt（document.getElementById（'quantity'）。值，10）；
counter.innerHTML=计数；
反样式（）；
});
函数counterStyle（）{
如果（计数<0）{
counter.classList.add（“否定”）；
counter.classList.remove（“肯定”）；
}否则，如果（计数>0）{
counter.classList.add（“肯定”）；
counter.classList.remove（“否定”）；
}否则{
counter.classList.remove（“否定”）；
counter.classList.remove（“肯定”）；
}
}
函数addInput（）{
console.log（inputValue）
}
addInput（）
。阳性{
背景颜色：绿色；
}
.否定{
背景色：红色；
}
0
-
+
处理单击事件时，您有和运算符。这就是为什么它总是用1加或减，而不是用输入的值。您应该在使用后将输入元素的值添加到可添加的整数中

我正在更改的代码：

count--;

我要把它改成

count -= parseInt(document.getElementById('quantity').value, 10);

我也在为
count++
做同样的事情

此外，您的
counterStyles（）
函数似乎没有适当地删除类，有时您的红色背景中会出现正整数。我通过在这里添加所需的
removeClass（）
调用解决了这个问题

代码的其余部分是相同的


let decreaseBtn=document.getElementById（“buttonDecrease”）；
让increaseBtn=document.getElementById（“buttonIncrease”）；
让计数器=document.getElementById（“计数器”）；
让inputValue=document.getElementById（“数量”）.inputValue
让计数=0；
decreaseBtn.addEventListener（“单击”，（）=>{
count-=parseInt（document.getElementById（'quantity'）。值，10）；
counter.innerHTML=计数；
反样式（）；
});
increaseBtn.addEventListener（“单击”，（）=>{
count+=parseInt（document.getElementById（'quantity'）。值，10）；
counter.innerHTML=计数；
反样式（）；
});
函数counterStyle（）{
如果（计数<0）{
counter.classList.add（“否定”）；
counter.classList.remove（“肯定”）；
}否则，如果（计数>0）{
counter.classList.add（“肯定”）；
counter.classList.remove（“否定”）；
}否则{
counter.classList.remove（“否定”）；
counter.classList.remove（“肯定”）；
}
}
函数addInput（）{
console.log（inputValue）
}
addInput（）
。阳性{
背景颜色：绿色；
}
.否定{
背景色：红色；
}
0
-
+
您需要在事件侦听器函数中获取输入值，而不是在脚本启动时。然后使用它，而不仅仅是递增和递减

获取输入值的属性是
.value
，而不是
.inputValue


let decreaseBtn=document.getElementById（“buttonDecrease”）；
让increaseBtn=document.getElementById（“buttonIncrease”）；
让计数器=document.getElementById（“计数器”）；
让数量=document.getElementById（“数量”）；
让计数=0；
decreaseBtn.addEventListener（“单击”，（）=>{
计数-=添加输入（）；
counter.innerHTML=计数；
反样式（）；
});
increaseBtn.addEventListener（“单击”，（）=>{
计数+=添加输入（）；
counter.innerHTML=计数；
反样式（）；
});
函数counterStyle（）{
如果（计数<0）{
counter.classList.add（“否定”）；
counter.classList.remove（“肯定”）；
}否则，如果（计数>0）{
counter.classList.add（“肯定”）；
counter.classList.remove（“否定”）；
}否则{
counter.classList.remove（“否定”）；
counter.classList.remove（“肯定”）；
}
}
函数addInput（）{
返回parseInt（quantity.value）；
}
。阳性{
背景颜色：绿色；
}
.否定{
背景色：红色；
}
0
-
+
Y