Question

对JS来说很新，只是玩弄我从书中写的例子。使用下面的代码 - 为什么我的函数没有被执行？我打电话给他们，语法是正确的。如果我放置document.addEventListener（“DOMContentLoaded”，init，false）; 然后init（）函数将执行但不执行test（）函数。

我也很困惑应该正确放置document.addEventListener的位置以及它对init函数的确切含义。是否应该首先调用init（）函数？什么通常在init（）函数中？

提前致谢。代码如下;

function init() {
    var panel = document.getElementById("panel");
    panel.innerHTML = "Hello World";
}


function test() {
    var panel = document.getElementById("panel");
    panel.innerHTML = "See ya";

}
init();
test();

Answer 1

您可能在加载DOM元素之前执行这些函数。页面从上到下阅读。如果函数在读取HTML之前执行，则该元素将不存在。

许多开发人员将脚本作为正文中的最后一个元素来避免这种情况。

或者像这样使用onload处理程序

window.onload = function () {
  init();
  test();
}

不需要在处理程序中定义函数

EDIT。您正在将数据写入同一元素也是如此，因此只有第二个函数才能显示您可以看到的结果。您可以写一个单独的元素，或者做一个答案建议并将数据添加到一起。

Answer 2

听起来这些方法正在调用，但它们会引发错误，因为它们是在DOM加载完成之前调用的。在正常情况下，这样的脚本将在浏览器到达时立即执行，因此如果在加载DOM之前发生这种情况（通常就是这种情况），对document.getElementById（）的调用将失败，因为文档没有'已装好。

你接近对document.addEventListener（“DOMContentLoaded”，init，false）的调用; - 这告诉浏览器在加载DOM时调用init。但是，在这种情况下，您只调用init，因此不会调用test（）。

我建议删除你对init（）的内联调用;和test（）;,然后添加以下内容：

function onLoaded(){
    init();
    test();
}

然后从事件监听器调用onLoaded：

document.addEventListener ("DOMContentLoaded" , onLoaded , false);

了解javascript中的流程

2 个答案: