JavaScript代码在代码运行时不会执行，但是当我调试它并在控制台中执行时，它可以工作

Question

我有以下代码:

var e = document.getElementById("overlay");
e.parentNode.removeChild(e);

这段代码应该删除 DOM 元素，但事实并非如此。因此，我删除了代码并添加了一个断点，并在暂停期间手动在控制台中输入代码，并且它起作用了(即该元素已成功删除)。

这种行为对我来说似乎很奇怪，所以我想问一下，为什么会发生这种情况以及我可以做什么来检查这个特殊问题？

提前致谢。

编辑:感谢您的快速回复。尽管如此，我想完全清楚地表明，元素 #overlay 在代码执行时确实存在。此外，当我在代码中的该位置放置调试断点并执行这两行代码时，它确实会对这个特定的现有元素产生影响(如果没有调试，则不会产生影响)。

编辑2:我被要求澄清代码。我在 body (queryloader2 插件的一部分，确保图像预加载)之前执行以下代码:

window.addEventListener('DOMContentLoaded', function() {
    new QueryLoader2(document.querySelector("body"), {});
});

不存在任何错误(除了由于缺少图像而导致的 404 错误，这对 Javascript 没有影响)。

Answer 1

正如 Teemu 提到的，当代码运行时，#overlay 很可能不存在。

进行测试..尝试将您的代码包装在其中任何一个中...

JavaScript

window.onload = function () { /*your code*/ };

Jquery(如果包含)

$(document).ready(function () { /* your code*/ });