为何将用户输入存入全局变量后，JavaScript函数无法正常工作？

核心原因：变量赋值的执行时机完全不同 #

你的问题本质是变量赋值语句的执行时机导致的，下面分别拆解两种作用域的差异：

1. 局部作用域下的numberHolder（正常工作） #

当numberHolder声明在checkTheNumber函数内部时，赋值语句：

const numberHolder = Number(document.querySelector(".numebr-holder").value);

会在每次点击按钮触发函数执行时重新运行——也就是说，用户每点击一次检查按钮，代码都会主动去读取输入框的当前最新值，再转换成数字存入变量，自然能和用户的实时输入同步。

完整的局部作用域代码逻辑：

// 全局作用域
let message = document.querySelector(".message");
const checkBtn = document.querySelector(".btn-check");
const secretNumber = Math.trunc(Math.random() * 20) + 1;
console.log("the random number is = " + secretNumber);

let checkTheNumber = function () {
  // 局部作用域：每次点击都重新读取输入框当前值
  const numberHolder = Number(document.querySelector(".numebr-holder").value);

  if (!numberHolder) {
    message.textContent = "🚫no number";
    console.log("no number");
  } else if (numberHolder < secretNumber) {
    message.textContent = "📉 too low";
    console.log("low " + numberHolder);
  } else if (numberHolder > secretNumber) {
    message.textContent = "📈 too high";
    console.log("high " + numberHolder);
  } else {
    message.textContent = "✅ correct";
    console.log("correct " + numberHolder);
  }
};

checkBtn.addEventListener("click", checkTheNumber);

2. 全局作用域下的numberHolder（值不更新） #

如果把numberHolder放在全局作用域，赋值语句会在页面加载完成后立刻执行一次——此时输入框的内容是初始状态（空值），这个值会被永久存在numberHolder里。

之后即使用户修改输入框内容，全局的赋值语句不会自动重新执行，变量里存储的始终是页面初始化时读取的第一个值。只有刷新页面时，全局代码重新执行，才会读取刷新前输入框的最后一次值（但这已经是新的页面会话了）。

错误的全局作用域示例：

// 全局作用域：页面加载时仅执行一次赋值，值固定
const numberHolder = Number(document.querySelector(".numebr-holder").value);

let message = document.querySelector(".message");
const checkBtn = document.querySelector(".btn-check");
const secretNumber = Math.trunc(Math.random() * 20) + 1;

let checkTheNumber = function () {
  // 这里使用的是页面初始化时的旧值，不会随输入框变化更新
  if (!numberHolder) {
    message.textContent = "🚫no number";
    console.log("no number");
  }
  // ... 后续判断逻辑都基于旧值，自然无法正确响应新输入
};

checkBtn.addEventListener("click", checkTheNumber);

两种作用域的关键差异总结 #

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