Question

不管源代码如何，我都对以下奇怪行为感到疯狂。

类似下面的语句返回空（或未引用的变量）

var submitInput = document.querySelector('.sb-search-input');

但是，如果在相同的情况下-实际上是下面的一行-我会document.querySelector('.sb-search-input')一切正常。

我无法理解问题所在。所引用的CSS类当然在HTML中。

我尝试了以下失败的尝试： -交换课程顺序，将召回的课程排在列表顶部 -给定对象中只有一个类

有趣的是，正确地拾取了另一个相似的物体。

尽管起初我可能是一个隐藏的对象，但是当涉及到内联样式时，它们全部具有可见性并显示为空。这些属性是通过CSS块控制的，其可见性是隐藏的。

但是，这又使我感到困惑，在某些情况下，代码似乎可以正常工作，而在某些情况下，代码却无法正常工作。

使用Web开发人员进行调试，我可以看到代码在第二次迭代中工作正常，但这没有任何意义，因为所有代码都包装在document.addEventListener('DOMContentLoaded', (event) => {

中

对我在做什么错有任何想法吗？

-更新-

here提供了一段代码。必须注释document.addEventListener('DOMContentLoaded', (event) => {部分以打印警报。

如您所见，有什么奇怪的东西。

-更新2-

我相信代码本身没有错。启用本地替代，以便将文件保存在磁盘上，我可以正确检查变量，而无需对源代码进行任何其他更改。从下面的屏幕快照中可以看到，变量按预期托管了该值。

然后，Chrome Web Developer可能会出现问题，尽管我可以看到，隐式为本地var赋值仍然会导致问题。先定义局部变量然后再分配就可以了。

如果有人可以阐明原因，将不胜感激。