将导航 html 代码移动到单独的文件，javascript 现在不工作

Question

我的导航栏完全使用汉堡包图标来使用 javascript 文件进行动画处理，直到我决定将导航代码移动到单独的文件中，以便可以将其加载到所有不同的 html 文档中。 现在，当我尝试单击汉堡图标时，我收到以下错误。 代码仍会加载导航栏（徽标、图标、格式），但 javascript 不起作用，因为它表示 getElementById 的值为 null。 不知道如何解决。

当前错误文件夹的图像与所有代码的文本文件

Answer 1

您的代码在 .load .load() function 可以返回任何内容之前运行。 它异步运行以停止阻止其他代码运行。 您可以将回调 function 提供给负载 function ，当负载 function 返回时将调用该回调。 然后将更新 DOM 以了解您的导航元素。 您可以将您的其他代码封装在 function 中，然后将 function 名称作为参数传递，或者您可以传递匿名 function 并将所有内容放在那里。

例子：

$('#nav-placeholder').load('assets/nav.html', function() {
    const ham = document.getElementById('ham');
    ham.addEventListener...
    ...
    ..
    .
 });