JS Function variables not seeing global variables

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

I run with a little problem when writting a personal project. It's a small phone simulator and at this moment I'm challenged by a "global scope" problem. As you see in the provided code I have 4 variables in global, but only two( numFlag & callFlag ) are working without any problem. When it comes to callDisplay & callingText variables i have to call them every time when they are needed just like the function wouldn't have acces to their global versions. I tried deleting the local scope versions and hoped it would operate on global, but it won't. I know that I can leave it like this for now(it works like it should) but the additional variables are only making the code harder to read and maintanance...and it's driving me insane, why it's not working. So please, enlighten me :)

Answer 1

This happens because of the following lines

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

They are overwriting the callDisplay and callingText variables.

---

Use

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

instead and it will work as you want

---

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