Javascript 增加和减少按钮点击的值

嗨，我怎样才能制作一个增加和减少值的按钮？我单击一次按钮添加1，再次单击时将该值减少1，因此它不能计数到1以上

我有大约50个按钮，目前，当我选择2个以上的按钮时，它会重置，但它必须添加一次单击的按钮的所有值。它周围的站点看起来与此类似：

var点击次数=0；
函数clickME（）{
点击次数+=1；
如果（单击==2）{
点击次数=0；
}
document.getElementById（“clicks”）.innerHTML=clicks；
}

---

您需要分别为每个按钮维护一个计数器-使用数组跟踪按钮被单击的次数。如果您不这样做，当您选择2个按钮并重置时，代码中的clicks变量将为2

考虑到每个按钮（或更一般地说，每个元素）都是DOM（文档对象模型）的一部分，每个按钮都是一个对象，因此没有人会让您无法使用它们：您可以为每个按钮DOM对象设置字段

单击

：

function clickME(event) {
    var btn = event.target;
    btn.clicks = ((btn.clicks || 0) + 1) % 2;
    window.clicks = (window.clicks || 0) + btn.clicks * 2 - 1;
    document.getElementById("clicks").innerText = window.clicks;
}

在检查代码时，我还简化了逻辑，用

MOD

（

%

）运算符替换

if

以检查零。此外，我将

innerHTML

替换为

innerText

，因为我们不希望将数字呈现为HTML代码，而是纯文本，尽管在本例中，这没有什么区别

注意： 不要忘记在HTML中传递带有

onclick

属性的事件数据对象：

<input onclick="clickME(event)" ...>

看看这把小提琴：

在html上：

假设你有50个

<button type="button" data-clicked="false">1</button>
<button type="button" data-clicked="false">2</button>

---

编辑：这是一个正在工作的

，因为您将它标记为jQuery。这是一个使用jQuery的解决方案。解决方案包括使用

data-

属性来保持每个按钮（输入）的点击次数。我不知道为什么用输入代替按钮，但我保持不变

它还有一个getTotal（）函数，用于遍历每个元素，统计单击以查看选择了多少插槽，并为您显示该数字

$（文档）.ready（函数（）{
美元（“.btn”）。在（“单击”，单击我）；
});
函数clickME（）{
var clicks=$（this）.data（“clicks”）；
var newClicks=parseInt（clicks）+1；
如果（新建单击次数>1）{
newClicks=0；
}
//在元素上设置新的单击次数
$（此）.data（“单击”，newClicks）；
setTotal（）；
}
函数setTotal（）{
var合计=0；
$（“.btn”）。每个（函数（imdex，btn）{
var currClicks=parseInt（$（btn）.data（“clicks”）；
总数+=点击次数；
});
$（“#点击次数”）.text（总计）；
}

您已选择0个插槽/秒

但我需要将这两个按钮的值汇总到另一个对象中，以便在其他地方显示它。我不确定您想做什么。你的意思是你想得到所有按钮的总值吗？不幸的是，它并没有把所有按钮都计算在内。对不起@mariie，我误解了这个问题。再读一遍，我澄清了你的观点：请看我问题中的更新。我已经试过了，但没有用。

var buttons = document.querySelectorAll('button');
buttons.forEach(function(button) {
  button.addEventListener('click', function() {
    if (this.dataset.clicked == 'false') {
      this.dataset.clicked = 'true';
      this.innerHTML = parseInt(this.innerHTML) + 1;
    }
    else {
      this.dataset.clicked = 'false'
      this.innerHTML = parseInt(this.innerHTML) - 1;
    }
  })
});