无法在函数内访问全局变量 (Javascript)

Question

我写了一个简单的BMI计算器，但是我好像无法访问函数内部的全局变量。如果 weight 只是一个数字，一切都很好——但是当我想用 Javascript 获取这个元素时，它不起作用。当这些变量在函数内部时，一切都很好。我知道，提升，范围..但是为什么带有数字的变量可以工作呢？

代码如下：

const height = parseInt(document.querySelector("#height").value);
const weight = parseInt(document.querySelector("#weight").value);

const results = document.querySelector("#results");

function bmiCalc() {
  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;
  }
}

const button = document.querySelector(".results__btn");

button.addEventListener("click", bmiCalc);

Answer 1

那是因为您在用户输入任何内容之前获取值，因为一旦脚本启动就会获取输入数据运行

Answer 2

如果您想在全局范围内声明它，则需要在每次输入更改时放置一个侦听器以从中获取实际值。如果将身高和体重放入 bmiCalc() 中，它会起作用，因为该函数仅在按下按钮时被调用，因此它从输入中获取实际值（按下按钮时的当前值）。

Answer 3

原因是，当页面加载时，您的全局变量将在输入任何内容之前读取输入。全局变量在页面加载时创建，在 window 关闭时删除。在您的代码中，正在创建全局变量 weight 和 height 并使用这两个输入（为空）为它们分配一个值。因此，当您单击该按钮时，体重和身高变量的值为“”。它不会显示评估结果，而是会显示错误消息。另一方面，当您将变量放入函数中时，除非您执行函数（在本例中为 bmiCalc 函数），否则不会创建变量。它是这样工作的：

按钮被点击
变量已创建。
该函数计算输入。
条件满足时显示结果
活动结束
变量被删除。

而且，同样的过程一遍又一遍地发生。

Answer 4

这仅仅是因为 height 和 weight 的值是在页面完成加载时设置的，甚至在 bmiCalc 函数定义、绑定和运行。由于您希望在单击计算按钮时提取新值，因此您需要具有读取 bmiCalc 函数内字段的代码，否则，您将只能获得启动时的值。因此，可以访问变量，但它们是空的，因为没有任何内容可读。

如果你想在函数外定义元素getter，你可以这样重写：


const heightInput = document.querySelector("#height");
const weightInput = document.querySelector("#weight");
const results = document.querySelector("#results");

function bmiCalc() {
  const height = parseInt(heightInput.value);
  const weight = parseInt(weightInput.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;
  }
}

const button = document.querySelector(".results__btn");

button.addEventListener("click", bmiCalc);

它的不同之处在于它在函数外部绑定输入元素，但随后在函数调用时实际读取并解析它们的内容。

无法在函数内访问全局变量 (Javascript)

Can't access global variables inside a function (Javascript)

javascript

variables

global