为何getRandomNumber()仅页面刷新生效，点击按钮不更新随机数？

我开发猜数字功能时，把随机数生成逻辑封装成getRandomNumber()函数后，发现这个函数只在页面加载时生成随机数，点击提交按钮时随机数不会更新；但直接在playGame函数内生成随机数的方案能正常工作。以下是两段代码，问题出在哪？

第一段可正常运行的代码 #

window.onload = function() {
    document.getElementById("number-submit").addEventListener("click", playGame);
    document.getElementById("restart-game").addEventListener("click", initGame);
}

function playGame() {
    let numberGuess = document.getElementById("number-guess").value;
    console.log(numberGuess);

    var randomNumber = Math.floor((Math.random() * 3) + 1);
    console.log(randomNumber);

    if (numberGuess > randomNumber) {
        console.log("Too High, Try Again");
    } else if (numberGuess < randomNumber) {
        console.log("Too Low, Try Again");
    } else {
        console.log("Congratulations This Is Correct!!");
    }
}

第二段存在问题的代码 #

let correctNumber = getRandomNumber();
console.log(correctNumber);

function getRandomNumber(){
    let randomNumber = Math.floor((Math.random() * 100) + 1);
    return randomNumber;
}

问题根源 #

核心问题是变量赋值的时机不对：

• 在第二段代码里，let correctNumber = getRandomNumber();写在全局作用域中，页面加载时就会执行这行代码，调用一次getRandomNumber()生成随机数并赋值给correctNumber，之后这个变量的值就固定了，不会自动重新调用函数更新。
• 第一段正常代码则是在每次点击触发playGame函数时，才执行随机数生成逻辑，所以每次提交都会得到新的随机数。

解决办法 #

根据需求不同，有两种修正方式：

方式1：每次提交都生成新随机数

把correctNumber的赋值放到playGame函数内部，这样每次点击提交按钮时都会重新调用getRandomNumber()生成新的随机数：

window.onload = function() {
    document.getElementById("number-submit").addEventListener("click", playGame);
    document.getElementById("restart-game").addEventListener("click", initGame);
}

function getRandomNumber(){
    let randomNumber = Math.floor((Math.random() * 100) + 1);
    return randomNumber;
}

function playGame() {
    let numberGuess = document.getElementById("number-guess").value;
    let correctNumber = getRandomNumber(); // 每次调用playGame时重新生成随机数
    console.log(numberGuess, correctNumber);

    if (numberGuess > correctNumber) {
        console.log("Too High, Try Again");
    } else if (numberGuess < correctNumber) {
        console.log("Too Low, Try Again");
    } else {
        console.log("Congratulations This Is Correct!!");
    }
}

function initGame() {
    // 重置输入框
    document.getElementById("number-guess").value = "";
}

方式2：一局游戏用同一个随机数（猜对或重启才更换）

如果希望一局游戏中随机数保持不变，直到用户猜对或点击重启按钮才更新，就把随机数的生成放到initGame函数里，页面加载时初始化：

let correctNumber;

window.onload = function() {
    document.getElementById("number-submit").addEventListener("click", playGame);
    document.getElementById("restart-game").addEventListener("click", initGame);
    initGame(); // 页面加载时初始化随机数
}

function getRandomNumber(){
    let randomNumber = Math.floor((Math.random() * 100) + 1);
    return randomNumber;
}

function initGame() {
    correctNumber = getRandomNumber(); // 初始化/重置随机数
    document.getElementById("number-guess").value = "";
    console.log("新的随机数已生成：", correctNumber);
}

function playGame() {
    let numberGuess = document.getElementById("number-guess").value;
    console.log(numberGuess, correctNumber);

    if (numberGuess > correctNumber) {
        console.log("Too High, Try Again");
    } else if (numberGuess < correctNumber) {
        console.log("Too Low, Try Again");
    } else {
        console.log("Congratulations This Is Correct!!");
        // 猜对后自动开启新一局
        initGame();
    }
}

内容的提问来源于stack exchange，提问作者goldmyn ke