Javascript 使用闭包分隔计数器

给出下面的代码，您将如何使每个按钮向其各自的计数器添加1。当前，当按下一个按钮时，它会将1加到计数器上，但当按下另一个按钮时，它会将另一个计数器的和加上1。我知道这可以通过创建另一个add变量来实现，但是不创建另一个计数器函数就可以实现吗

计数！
计数
0
0
var add=（函数（）{
var计数器=0；
返回函数（）{return counter+=1；}
})();
函数myFunction（）{
document.getElementById（“demo”）.innerHTML=add（）；
}
函数myFunction2（）{
document.getElementById（“demo2”）.innerHTML=add（）；
}

考虑如下创建一个单独的计数器，而不必复制

添加逻辑


计数！
计数
0
0
函数createCounter（）{
var计数器=0；
返回函数（）{return++counter；}
}
var counter1=createCounter（）；
var counter2=createCounter（）；
函数count1（）{
document.getElementById（“demo”）.innerHTML=counter1（）；
}
函数count2（）{
document.getElementById（“demo2”）.innerHTML=counter2（）；
}
考虑如下创建一个单独的计数器，而不必复制
添加逻辑


计数！
计数
0
0
函数createCounter（）{
var计数器=0；
返回函数（）{return++counter；}
}
var counter1=createCounter（）；
var counter2=createCounter（）；
函数count1（）{
document.getElementById（“demo”）.innerHTML=counter1（）；
}
函数count2（）{
document.getElementById（“demo2”）.innerHTML=counter2（）；
}

var计数器1=0；
var=2=0；
var add=函数（计数）{
返回计数+=1；
};
函数myFunction（）{
计数器1=添加（计数器1）
document.getElementById（“demo”）.innerHTML=counter1；
}
函数myFunction2（）{
计数器2=添加（计数器2）
document.getElementById（“demo2”）.innerHTML=counter2；
}
计数！
计数
0
0
var计数器1=0；
var=2=0；
var add=函数（计数）{
返回计数+=1；
};
函数myFunction（）{
计数器1=添加（计数器1）
document.getElementById（“demo”）.innerHTML=counter1；
}
函数myFunction2（）{
计数器2=添加（计数器2）
document.getElementById（“demo2”）.innerHTML=counter2；
}
计数！
计数
0
0
您可以执行以下操作，请注意按钮上添加的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>

计数！
计数
0
0
功能计数器（b，p）{
var按钮=document.getElementById（b）；
var para=document.getElementById（p）；
var值=0；
addEventListener（'click'，function（）{
para.innerHTML=value+=1；
});
}
计数器（“btn1”、“演示”）；
计数器（“btn2”、“demo2”）；

每次调用计数器都会为click事件创建一个闭包，以更新正确的

更简单的是，您不需要创建一个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>

计数！
计数
0
0
功能计数器（b，p）{
var para=document.getElementById（p）；
document.getElementById（b）.addEventListener（'click'，function（）{
para.innerHTML=parseInt（para.innerHTML）+1；
});
}
计数器（“btn1”、“演示”）；
计数器（“btn2”、“demo2”）；
您可以执行以下操作，注意按钮上添加的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>

计数！
计数
0
0
功能计数器（b，p）{
var按钮=document.getElementById（b）；
var para=document.getElementById（p）；
var值=0；
addEventListener（'click'，function（）{
para.innerHTML=value+=1；
});
}
计数器（“btn1”、“演示”）；
计数器（“btn2”、“demo2”）；

每次调用计数器都会为click事件创建一个闭包，以更新正确的

更简单的是，您不需要创建一个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>

计数！
计数
0
0
功能计数器（b，p）{
var para=document.getElementById（p）；
document.getElementById（b）.addEventListener（'click'，function（）{
para.innerHTML=parseInt（para.innerHTML）+1；
});
}
计数器（“btn1”、“演示”）；
计数器（“btn2”、“demo2”）；
您也可以尝试以下方法：

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>

计数！
计数
0
0
您也可以尝试以下方法：

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>

计数！
计数
0
0