闭包函数问题

closure function issue javascript

本文关键字：问题 函数 闭包      更新时间：2023-09-26

我的随机数工作正常，但我的计数器不工作。我的计数器应该在每次点击按钮时添加一个，而不是只显示1，为什么没有呢?我没有得到任何控制台错误。我不知道是什么问题。我应该使用闭包函数。我相信我做的是正确的。

<div>
    <button type="button" onclick="showNumber()">Number</button>
    <p id="counter"></p>
    <p id="ran_num"></p>
</div>
javascript

function showNumber() {
    var number1 = 0;
    var counter1 = 0;
    var randomNum = (function() {
        return function() {
        return number1 = Math.floor((Math.random() * 100) + 1);}
    })();
    var counterNum = (function() {
        return function() {
        return counter1 += 1}
    })();
    document.getElementById("counter").innerHTML = "Count = " + counterNum();
    document.getElementById("ran_num").innerHTML = "Random Number = " + randomNum();
}

如果您希望counter1在showNumber调用之间保持其状态，那么不应该在其内部定义它。相反，请尝试这样做:

(function() { // this is your closure
    var counter = 0;
    function randomNum() {
        return Math.floor(Math.random()*100) + 1;
    }
    function counterNum() {
        counter++;
        return counter;
    }
    function showNumber() {
        document.getElementById('counter').innerHTML = "Count = " + counterNum();
        document.getElementById('ran_num').innerHTML = "Random Number = " + randomNum();
    }
    // make showNumber accessible in the global scope:
    window.showNumber = showNumber;
})();

使用大部分现有代码

function showNumber() {
    var randomNum = function() {
        return Math.floor((Math.random() * 100) + 1);
    }
    var counterNum = (function() {
        var counter = 0;
        return function() {
            return ++counter;
        }
    })();
    document.getElementById("counter").innerHTML = "Count = " + counterNum();
    document.getElementById("ran_num").innerHTML = "Random Number = " + randomNum();
}
相关文章：