Question

我已经包含了我的JavaScript文件中的代码和header.html，它们在<div id="header"></div>的帮助下被加载到index.html中。我在index.html的结束body标记之前有所有的“ script src”。当我尝试按下按钮时，出现以下错误：

未捕获的TypeError：无法读取null的属性'addEventListener'

我知道这与我加载html文件的方式有关。有什么办法可以解决这个问题？

我正试图将代码冗余程度或多或少保持在较低水平，并且无法将整个标头复制到每个html文件中。

/* -- Loading assets -- */

$(document).ready(function() {
  $("#header").load("assets/header.html");
  $("#footer").load("assets/footer.html");
});

/* -- Mobile hamburger menu --*/

const hamburger = document.getElementById('hamburger');
const navList = document.getElementById('nav-list');

hamburger.addEventListener('click', () => {
  navList.classList.toggle('show');
});

/* Seperate header.html file that gets loaded into index.html */

<nav class="navbar" id="navbar">
  <p class="logo"><a href="../index.html">&lt;ŽF&#47;&gt;</a></p>

  <button class="hamburger" id="hamburger">
    <i class="fa fa-bars"></i>
  </button>

  <ul class="nav-list" id="nav-list">
    <li class="nav-item"><a href="journey.html">Link1</a></li>

    <li class="nav-item"><a href="design.html">Link2</a></li>

    <li class="nav-item"><a href="webdev.html">Link3</a></li>
  </ul>
</nav>

“汉堡包菜单”的JavaScript不起作用

0 个答案: