页面加载时无法运行函数（创建元素）

Question

我使用 window.onload() 创建了一个新的 div，其中包含文本。如果我将它添加到按钮 (onclick)，它会起作用，但当我将它与 window.onload() 一起使用时它不会触发。我必须在同一个运行良好的 js 文件中使用其他 window.onload。知道我该如何解决这个问题以及问题可能是什么吗？

我的代码：

function addDate() {
    var addDiv = document.createElement('div');
    addDiv.innerHTML = "test";
    document.getElementById('date').appendChild(addDiv);
}
window.onload = addDate();

Answer 1

1)您绑定的方式，您可以只将一个方法附加到一个事件。你需要为你想要的添加一个事件监听器。

window.addEventListener("load", function() { alert("hello!");});

直接为 onload 事件设置一个方法将替换任何以前附加的方法。但是，如果您改用侦听器，则可以将其中的许多侦听器绑定到一个事件。

2)如果你在你的外部文件中注释掉onload，当document.getElementsByClassName("bar")被调用时，你的文档还没有准备好，然后，它将return 0 项。

3) 按照我在第一点中解释的那样使用 addEventListener。如果你在两个地方都应用它，它会很有魅力。

如果您想了解有关 window.onload 的更多信息，请查看 here

Answer 2

当你说 "I have to other window.onload in the same js file" 我假设你的意思是 "I have two other..."，这就是问题所在。

如果你说：

window.onload = doThis;
window.onload = doThat;

只有 doThat 被调用。另外，请注意……没有括号！是 window.onload = doThat，不是 window.onload = doThat()。

如果您使用：

window.addEventListener('load', addDate);

这样就可以得到要调用的函数，而不至于弄乱其他正在调用的函数

Answer 3

我建议您使用 jQuery 等库来完成 JavaScript 工作。处理诸如此类的问题要容易得多。初始化使用 ready 函数。

$(document).ready(function() {
    addDate()
});

您可以根据需要添加任意数量的 ready() 调用（每个脚本一个）。

在引擎盖下，正如其他人所提到的，它将使用 window.addEventListener(<event name>, <inline function>)。所以我们添加了一些代码，速度会稍微慢一些，但是您将拥有运行速度更快的代码。

Answer 4

谢谢大家，问题是我在代码中使用了两次 window.onload。正如你们所说，解决方案是改用 window.addEventListener。我还删除了括号。

因此，对于遇到同样问题的其他人，请改用 window.addEventListener 触发代码。喜欢：

window.addEventListener('load', databaseToNewElement);
window.addEventListener('load', addDate);

页面加载时无法运行函数（创建元素）

Cant run function (create element) on page load

javascript

onload

createelement

页面加载时无法 运行 函数（创建元素）

Cant run function (create element) on page load

javascript

onload

createelement

页面加载时无法运行函数（创建元素）