使用闭包分开计数器

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

考虑创建一个单独的计数器，而不必复制add逻辑。

<button type="button" onclick="count1()">Count!</button>
<button type="button" onclick="count2()">Count!</button>
<p id="demo">0</p>
<p id="demo2">0</p>
<script>
  function createCounter() {
    var counter = 0;
    return function () { return ++counter; }
  }

  var counter1 = createCounter();
  var counter2 = createCounter();

  function count1() {
    document.getElementById("demo").innerHTML = counter1();
  }

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

Answer 2

您可以执行以下操作，请注意添加的按钮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>

每次调用计数器都会为click事件创建一个闭包，以更新正确的<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>

Answer 3

你也可以试试这个：

function counter(start) {
    return function increment(){
        start += 1;
        return start;
    }
}

function onButtonClick(sourceElemId, counterFunc){
    document.getElementById(sourceElemId).innerHTML = counterFunc();
}

在HTML中：

<button type="button" 
       onclick="onButtonClick('demo', counter(0))">Count!
 </button>
<button type="button" 
        onclick="onButtonClick('demo2', counter(0))">Count!</button>
<p id="demo">0</p>
<p id="demo2">0</p>

Answer 4

var counter1 = 0;
var counter2 = 0;
var add = function (count) {
    return count += 1;
};

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

function myFunction2(){
    counter2 = add(counter2)
    document.getElementById("demo2").innerHTML = counter2;
}

<button type="button" onclick="myFunction()">Count!</button>
<button type="button" onclick="myFunction2()">Count!</button>
<p id="demo">0</p>
<p id="demo2">0</p>

每次拨打add时，您都在重新定义计数器为0。此外，由于您需要两个不同的计数器，因此需要两个不同的变量来跟踪每个计数器。老实说，您可以删除add函数，只需使用counterX = counterX++而不是counterX = add(counterX)

添加到其特定函数中的每个计数器