JS函数无法访问部分全局变量问题求解

问题原因 #

• 变量遮蔽：你在answerNumber、callText等函数内部用let重复声明了callDisplay、callingText变量，JS会将当前作用域的同名变量绑定到局部作用域，屏蔽外层全局变量，哪怕你删除部分局部声明，只要嵌套作用域还有残留的同名声明，就会出现无法访问全局变量的问题，甚至触发暂时性死区报错。
• 变量值被意外篡改：你全局声明的callDisplay原本存储的是DOM元素对象，但在answerNumber函数中你写了callDisplay = callDisplay.innerText += display.innerText，直接将callDisplay的值修改为字符串，后续再尝试用这个变量操作DOM属性自然会失效，你误以为是全局变量无法访问，实际是变量值已经被改坏。

解决方案 #

修正后完整代码 #

// 全局仅声明一次DOM引用，用const避免被意外篡改
const numFlag = document.getElementById("numBTN-Flag");
const callFlag = document.getElementById("callScreen");
const callDisplay = document.querySelector(".numberCalling");
const callingText = document.querySelector(".connectText");
// 请将下方选择器替换为你项目中display元素对应的实际选择器
const display = document.querySelector(".display");

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

const answerNumber = () => {
  numFlag.style.display = "none";
  callFlag.style.display = "block";
  // 直接修改全局DOM元素的innerText属性，不重新声明同名变量、不修改元素变量本身的值
  callDisplay.innerText += display.innerText;
  const callText = () => {
    if (callDisplay.innerText.length >= 9) {
      callingText.innerText = "łączę...";
      setTimeout(function() {
        callingText.innerText = "Trwa połączenie...";
        // 后续补充倒计时逻辑即可
      }, 4000);
    } else {
      callDisplay.innerText = "Zły numer";
    }
  };
  callText();
};

核心优化点 #

1. 全局存储DOM元素引用的变量统一用const声明，从语法层面避免被意外赋值修改为其他类型的值
2. 删除所有函数内部的callDisplay、callingText同名局部声明，直接使用全局的DOM引用即可
3. 操作DOM时仅修改元素的属性值（如innerText、style），不要给存储DOM元素的变量本身重新赋值

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