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

Posted 2023-02-19

【中文标题】JS函数变量看不到全局变量

【英文标题】：JS Function variables not seeing global variables

【发布时间】：2021-12-12 05:21:35

【问题描述】：

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 和 callingText 变量时，我必须在每次需要它们时调用它们，就像函数无法访问它们的全局版本一样。我尝试删除本地范围版本，并希望它可以在全局范围内运行，但它不会。我知道我现在可以这样（它应该像它那样工作）但是额外的变量只会使代码更难阅读和维护......而且它让我发疯，为什么它不起作用。所以请赐教:)

【问题讨论】：

不工作时的错误是什么？当您引用它们时可能不会呈现***.com/questions/14028959/…

当我从全局中删除 callDisplay 时，它显示它没有定义，但是当我尝试删除一个局部范围变量时，它显示“未捕获的类型错误：无法在字符串 'łączę. ..'例如

那个错误告诉你你的问题....你用字符串替换了元素引用。 :) 一个变量不能同时是两个不同的东西。你应该使用const 而不是let，它会因为你试图重用变量而对你大喊大叫。

好的，但是当我不覆盖它时，它只适用于 ELSE 语句

【参考方案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();
;

【讨论】：

是的，我以前做过，但它仍然无法完成工作。当我删除你所说的元素时，这个混蛋出现在屏幕上callDisplay.innerText = "Zły numer";

好的，我成功了。谢谢@Gabriele！

@Lukdavicki callDisplay.length >= 9 也需要更改为 callDisplay.innerText.length >= 9