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 :)

What is the error when it does not work? Probably not rendered when you reference them https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — epascarello, Oct 26 '21 at 20:55
When i remove callDisplay from global it shows that it's not defined, but when i try to delete one of the local scope variables it shows "Uncaught TypeError: Cannot create property 'innerText' on string 'łączę...' for example — Lukdavicki, Oct 26 '21 at 21:04
That error right there told you your issue.... you replaced the element reference with a string. :) A variable can't be two different things at the same time. You should have use `const` instead of `let` and it would have yelled at you for trying to reuse the variables. — epascarello, Oct 26 '21 at 21:04
ok, but when I'm not overwriting it only works with ELSE statement — Lukdavicki, Oct 26 '21 at 21:12

score 0 · Accepted Answer · answered Oct 26 '21 at 21:02

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

yes I done it before but it still doesnt do the job . When i remove the element that you said this bastard shows up on the screen `callDisplay.innerText = "Zły numer";` — Lukdavicki, Oct 26 '21 at 21:11
@Lukdavicki the `callDisplay.length >= 9` needed to be changed too, to `callDisplay.innerText.length >= 9` — Gabriele Petrioli, Oct 26 '21 at 21:33

JS Function variables not seeing global variables

1 Answers1