JS函数变量看不到全局变量

Question

 let numFlag = document.getElementById("numBTN-Flag"); let callFlag = document.getElementById("callScreen"); let callDisplay = document.querySelector(".numberCalling"); let callingText = document.querySelector(".connectText"); function callCancel() { callFlag.style.display = "none"; numFlag.style.display = "block"; callDisplay.innerText = ""; display.innerText = ""; } const answerNumber = () => { numFlag.style.display = "none"; callFlag.style.display = "block"; let callDisplay = document.querySelector(".numberCalling"); callDisplay = callDisplay.innerText += display.innerText; const callText = () => { if (callDisplay.length >= 9) { let callingText = document.querySelector(".connectText"); callingText = callingText.innerText = "łączę..."; setTimeout(function() { let callingText = document.querySelector(".connectText"); callingText = callingText.innerText = "Trwa połączenie..."; // do zrobienia odliczanie }, 4000); } else { let callDisplay = document.querySelector(".numberCalling"); callDisplay.innerText = "Zły numer"; } }; callText(); };

在编写个人项目时，我遇到了一个小问题。 这是一个小型电话模拟器，此时我面临“全局范围”问题的挑战。 正如您在提供的代码中看到的，我在全局中有 4 个变量，但只有两个（ numFlag和callFlag ）可以正常工作。 当涉及到callDisplay和callText变量时，我必须在每次需要它们时调用它们，就像该函数无法访问它们的全局版本一样。 我尝试删除本地范围版本并希望它可以在全局范围内运行，但它不会。 我知道我现在可以让它这样（它应该像它应该的那样工作）但是额外的变量只会使代码更难阅读和维护......这让我发疯，为什么它不起作用。 所以请赐教：）

Answer 1

这是因为以下几行

callDisplay = callDisplay.innerText += display.innerText;
callingText = callingText.innerText = "łączę...";
callingText = callingText.innerText = "Trwa połączenie...";

他们正在覆盖callDisplay和callingText变量。

---

用

callDisplay.innerText += display.innerText;
callingText.innerText = "łączę...";
callingText.innerText = "Trwa połączenie...";

相反，它将按您的意愿工作

---

let numFlag = document.getElementById("numBTN-Flag");
let callFlag = document.getElementById("callScreen");
let callDisplay = document.querySelector(".numberCalling");
let callingText = document.querySelector(".connectText");

function callCancel() {
  callFlag.style.display = "none";
  numFlag.style.display = "block";
  callDisplay.innerText = "";
  display.innerText = "";
}

const answerNumber = () => {
  numFlag.style.display = "none";
  callFlag.style.display = "block";
  callDisplay.innerText += display.innerText;

  const callText = () => {
    if (callDisplay.innerText.length >= 9) {
      callingText.innerText = "łączę...";
      setTimeout(function() {
        callingText.innerText = "Trwa połączenie...";
        // do zrobienia odliczanie
      }, 4000);
    } else {
      callDisplay.innerText = "Zły numer";
    }
  };
  callText();
};