将导航 html 代码移动到单独的文件,javascript 现在不起作用

问题描述

我的导航栏完全使用汉堡图标来制作动画 使用 javascript 文件,直到我决定将导航代码移动到 单独的文件,以便我可以将其加载到所有不同的 html 文档。现在 当我尝试单击汉堡图标时,收到以下错误。这 代码仍然加载导航栏(徽标、图标、格式),除了 javascript 不起作用,因为它说 getElementById 的值是 无效的。不知道怎么解决

IMAGE OF CURRENT ERROR FOLDER WITH TEXT FILES OF ALL THE CODE

解决方法

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

示例:

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