Global Variable is not being accesses in a particular block

I created a boolean variable at the top of my js code, It worked perfectly throughout the code and changes globally when its value changes in all Functions/Block where it is used. But in a particular block, I had to declare and initialize it again before it could be accessed in that block.It was a “document.addEventListener” block

I’m working on a responsive design so I created different event listeners for different width sizes.

It happened like this:

let isVisible = false
let query = window.matchMedia("(max-width: 600px)");

document.addEventListener("DOMContentLoaded", () => {
  if (query.matches) {
    button.addEventListener("click", () => {
      if (!isVisible) {
        searchBar.style.display = "block";
        isVisible = true;
      } else if (isVisible && searchBar.value) {
        get_movie(searchBar.value);
      } else {
        searchBar.style.display = "none";
        isVisible = false;
      }
    });
  }
});

The button.addEventListener doesn’t run at all because the isVisible conditions are yet to be met which is because the global variable is not being accessed.

It only starts running when I declare isVisible again inside that document.addEventListener block.