so I have a function that I call with onclick="openNav()" from an html element. This is my function:
function openNav() {
document.getElementById("nav-drawer").classList.add("nav-drawer-open");
blackout.style.display = "block";
setTimeout(() => {
blackout.classList.add("blackout-open");
}, 1);
}
This function works. The Page also knows that "blackout" = <div id="blackout"></div> at any point, e.g. when I type blackout in the console, it will give me the correct div. So I am assuming, that "blackout" must be a global variable (probably something like var blackout = document.getElementById("blackout");), but since I wrote this function a while ago, I can't remember where I defined that variable. I have searched all of my code and I don't seem to find it.
Does anybody have an idea, how this could work anyways, without me defining this variable manually? This is all very weird to me.
Browsers sometimes automatically create var for element with id
Explained here
So if you have an element with id blackout, some browsers, I don't know which, will create a js var with name blackout to reach this element
But don't use it ! As in some browsers, it will not work !!
Be sure to select your element by hand somewhere in your code and don't name your var the same as the id.