JS:增量计数器，不在全局范围内设置计数器变量

JS: incremental counter without setting a counter variable in the global scope?

本文关键字：计数器 全局 范围内 设置 变量 JS      更新时间：2023-09-26

我试图设置一个内部计数器，每当用户点击触发onclick函数的链接时，该计数器就会加1。它从0开始，每次用户点击链接，计数器都会增加1（或者你想要的任何整数）。刷新时计数器应重置为0，并且不能在全局范围中声明包含整数值的变量。

我一直在思考如何在每次函数运行时不重复该声明的情况下初始声明变量，本质上是将计数器值设置回原始值。

我不确定你想要的是什么，但这里有两种方法可以做你想做的：

// method 1: use a private scope
var click_handler = (function() {
    var counter = 0; // this is not in global scope!
    return function() {
        counter++;
    };
})();
// method 2: use a function property
function click_handler() {
    click_handler.counter++;
}
click_handler.counter = 0;

类似的东西？这里的counter是一个局部变量，onclick函数的定义范围与counter变量的定义范围相同。此外，每次刷新时，计数器都会重置为0。

<html>
<head>
    <title>Link Counter</title>
    <script type="text/javascript">
    window.onload = init
    function init() {
        var counter = 0
        var link = document.getElementById("link")
        var display = document.getElementById("display")
        function increase_counter() {
            counter++
            display.innerHTML = counter
            return false
        }
        link.onclick = increase_counter
    }
    </script>
</head>
<body>
    <a href="" id="link">Click Here </a>
    <p id="display">0 </p>
</body>
</html>
相关文章：