無法訪問 function 內的全局變量（Javascript）

Question

我寫了一個簡單的BMI計算器，但我似乎無法訪問function內部的全局變量。如果weight只是一個數字，一切都很好——但是當我想用Javascript獲取這個元素時，它不起作用。 當這些變量在 function 中時，一切都很好。 我知道，提升，scope.. 但是為什么帶有數字的變量可以工作呢？

這是代碼：

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

原因是，當頁面加載時，您的全局變量將在輸入任何內容之前讀取輸入。 全局變量在頁面加載時創建，在 window 關閉時刪除。 在您的代碼中，正在創建全局變量 weight 和 height 並使用這兩個輸入（為空）為它們分配一個值。 因此，當您單擊該按鈕時，體重和身高變量的值為“”。 它不會顯示評估結果，而是會顯示錯誤消息。 另一方面，當您將變量放入 function 時，除非您執行 function（在本例中為 bmiCalc 函數），否則不會創建該變量。 它是這樣工作的：

1. 按鈕被點擊
2. 變量被創建。
3. function 評估輸入。
4. 當條件滿足時顯示結果。
5. function結束。
6. 變量被刪除。

而且，同樣的過程一遍又一遍地發生。

Answer 2

那是因為您在用戶輸入任何內容之前獲取值，因為一旦腳本開始運行就會獲取輸入數據

Answer 3

如果您想在全局 scope 上聲明它，則每次輸入更改時都需要放置一個偵聽器以從中獲取實際值。如果將身高和體重放入 bmiCalc() 它正在工作，因為僅當按下按鈕時才會調用 function 所以它從輸入中獲取實際值（按下按鈕時的當前值）。

Answer 4

這僅僅是因為height和weight的值是在頁面完成加載時設置的，甚至在bmiCalc function 被定義、綁定和運行之前。 由於您希望在單擊計算按鈕時提取新值，因此您需要具有讀取bmiCalc function 內字段的代碼，否則，您將只能獲得啟動時的值。 因此，可以訪問變量，但它們是空的，因為沒有任何內容可讀。

如果你想在 function 之外定義元素 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);

它的不同之處在於它綁定了 function 外部的輸入元素，但隨后在調用時實際讀取並解析了 function 內部的內容。