JavaScript开发：BMI计算器场景下函数无法访问DOM取值全局变量问题

问题根因 #

你遇到的不是「全局变量无法被函数访问」的作用域问题，而是全局变量的取值时机错误：

• 你在全局作用域声明height、weight常量时，代码会在页面加载、JS脚本首次执行时立刻读取输入框的value。此时用户还未输入任何内容，取到的值是空字符串，经parseInt转换后结果为NaN。且const声明的常量不可重新赋值，后续用户输入内容后，全局的height、weight也永远是初始的NaN，点击按钮执行函数时自然会一直命中校验失败的分支，看起来像代码无法运行。
• 直接给全局变量赋值数字常量时，不需要读取输入框的实时值，页面加载阶段全局变量就已经被赋予了有效值，函数访问时自然可以正常计算。
• 把变量放到函数内部声明时，会在点击按钮触发函数的瞬间才读取输入框的最新值，此时用户已经完成输入，拿到的是有效值，所以可以正常执行。

修正方案 #

只需要把height、weight的取值逻辑移到函数内部即可，全局只保留固定的DOM节点引用即可：

// 全局只保存不会变化的DOM节点引用
const results = document.querySelector("#results");
const button = document.querySelector(".results__btn");

function bmiCalc() {
  // 点击按钮时再读取用户最新输入的数值
  const height = parseInt(document.querySelector("#height").value);
  const weight = parseInt(document.querySelector("#weight").value);
  if (height === "" || isNaN(height))
    results.innerHTML = "Invalid Height! Please use numbers";
  else if (weight === "" || isNaN(weight))
    results.innerHTML = "Invalid Weight! Please use numbers";
  else {
    const bmi = (weight / ((height * height) / 10000)).toFixed();
    results.innerHTML = bmi;
  }
}

button.addEventListener("click", bmiCalc);

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