javascript - 如何创建保留var值的函数？

我有这个代码

<input type="button" id="buttona" onClick="myFunction('this is buttonA')" />
<input type="button" id="buttonb" onClick="myFunction('this is buttonB')" />
<script>
function myFunction(message) {
  var count=10;
  count = count + 1;
  alert(message + ":" + count);
}
</script>

我想要的是当用户单击buttonA时显示消息“这是buttonA:11”，如果用户再次单击buttonA，则显示消息“这是buttonA:12”，如果用户单击buttonB，则显示消息“这是buttonB” :11“。我不想定义全局计数器变量，我想在函数上“封装”。即如果我添加:

<input type="button" id="buttonc" onClick="myFunction('this is buttonC')" />;

具有相同的功能而无需定义几乎所有其他内容。

计数器彼此独立并保留值。使我的问题有意义吗？

提前致谢

最佳答案

您可以考虑使用闭包。基本思想是创建一个创建“myFunctions”的函数，而不是使用单个“myFunction”。

function makeCounter(message){
    //We move count outside the onclick handler, so it can increment
    //but its not a global since we are inside another function!
    var count = 10;
    return function(){
        count = count + 1;
        alert(message + ":" + count);
    };
}

//now use makeCounter to create encapsulated onclick handlers:

document.getElementById("buttona").onclick = makeCounter("This is button A");
document.getElementById("buttonb").onclick = makeCounter("This is button B");