javascript - 使用封闭装置分隔柜台

Question

给定以下代码，如何让每个按钮为其各自的计数器加 1。目前，当按下一个按钮时，它的计数器会加 1，但是当按下另一个按钮时，它会将另一个计数器的总和加 1。我知道这可以通过创建另一个 add 变量来完成，但是是否可以在不创建另一个计数器函数的情况下做到这一点？

<button type="button" onclick="myFunction()">Count!</button>
<button type="button" onclick="myFunction2()">Count!</button>
<p id="demo">0</p>
<p id="demo2">0</p>
<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

function myFunction(){
    document.getElementById("demo").innerHTML = add();
}

function myFunction2(){
    document.getElementById("demo2").innerHTML = add();
}
</script>

Answer 1

您可以执行以下操作，记下添加到按钮的 id 以使事情变得简单

<button type="button" id="btn1">Count!</button>
<button type="button" id="btn2">Count!</button>
<p id="demo">0</p>
<p id="demo2">0</p>
<script>
function counter(b, p) {
  var button = document.getElementById(b);
  var para = document.getElementById(p);
  var value = 0;
  button.addEventListener('click', function() {
    para.innerHTML = value += 1;
  });
}
counter('btn1', 'demo');
counter('btn2', 'demo2');
</script>

每次调用 counter 都会为点击事件创建一个闭包，以更新正确的 <p>

更简单的是，您不需要创建 var 来保存该值，因为该值保存在元素本身中

<button type="button" id="btn1">Count!</button>
<button type="button" id="btn2">Count!</button>
<p id="demo">0</p>
<p id="demo2">0</p>
<script>
function counter(b, p) {
  var para = document.getElementById(p);
  document.getElementById(b).addEventListener('click', function() {
    para.innerHTML = parseInt(para.innerHTML) + 1;
  });
}
counter('btn1', 'demo');
counter('btn2', 'demo2');
</script>