Javascript 为什么这个常量变量即使在函数外部定义也能在函数中工作

我有一些javascript代码将网页中的文本元素更改为随机颜色。我是新手，但代码确实有效。每三秒钟，特定元素的文本颜色将更改为新的随机颜色

const handler = function() {
    const genselector = "div.tw-c-text-alt-2.tw-flex > span";
    const genel = document.querySelector(genselector);
    var randcolor = Math.floor(Math.random()*16777215).toString(16);
    genel.style.color = "#" + randcolor;
}
setInterval(handler, 3000);

如果我将两个常量变量移到函数外，程序将不再工作，这是有意义的，因为变量是在函数外定义的，它们不是全局变量

const genselector = "div.tw-c-text-alt-2.tw-flex > span";
const genel = document.querySelector(genselector);

const handler = function() {
    const specel = document.querySelector(specselector);    
    var randcolor = Math.floor(Math.random()*16777215).toString(16);
    genel.style.color = "#" + randcolor;
}
setInterval(handler, 3000);

但是，如果我只将第一个变量移到函数外，代码仍然可以工作，尽管我认为它不应该这样做

const genselector = "div.tw-c-text-alt-2.tw-flex > span";

const handler = function() {
    const genel = document.querySelector(genselector);
    var randcolor = Math.floor(Math.random()*16777215).toString(16);
    genel.style.color = "#" + randcolor;
}
setInterval(handler, 3000);

---

当genselector变量在函数外部定义时，函数是如何访问它的？无论是什么原因导致它工作，为什么当我移出genel变量时不会发生同样的事情。

当web浏览器执行javascript时，DOM和网页元素还没有准备好。这意味着

document.querySelector（genselector）

找不到元素，并且

genel

为空。在场景1和场景3中，这不是问题，因为3秒钟后会再次执行

处理程序
函数。但是在场景2中，
genel
的值只被赋值一次。
因此，如果这是（几乎）您仅有的JS代码，那么这是正常行为。第二个示例中代码崩溃的原因是，如果不使用事件侦听器，则在加载DOM之前执行代码。因此，基本上您正在尝试对尚未呈现的内容执行docuement.queryselector。在上一个示例中，您在执行函数时执行查询，这可能是创建所有HTML元素的地方，因此查询将找到该元素

现在，如何解决这个问题需要额外的知识。您可以在文档上设置一个事件侦听器，等待加载所有HTML代码：

window.addEventListener('load', (event) => {
  <<< Add your code here >>> 
});

window.addEventListener（'load'，（事件）=>{
> 
});

然后在使用代码的第二个示例时不会出现错误。
在您查询该元素时，该元素很可能不存在。变量范围不是问题所在。请使用谷歌搜索
块范围
和
范围
。最后，在js中搜索
函数
，获取一般答案。我假设这里的问题是运行jsSee的时间。在函数外部定义的变量在函数内部仍然可以访问；这不是脚本停止工作的原因。使用（点击
F12
）并读取任何错误。Is
document.querySelector（genselector）==null
？您的
是否位于HTML上方，并且没有
延迟属性，也没有
加载DOMContentLoaded
或
加载
侦听器？请参阅。在您的情况下，如果没有在任何地方定义specselector，那么该行也会阻止代码运行。