开发者问题收集

尝试使用带有切换功能的 javascript 来打开导航栏/汉堡菜单，但显示 null 属性错误

2023-01-09
291
javascript html css responsive hamburger-menu

我有一个 2 天后要交的作业，需要使用 javascript，我正尝试让这个导航栏在移动视图上变成汉堡菜单，并使用 js 来工作（需要响应）。我找到了这个简单的代码，它一直工作到最后两行... 

const burgerMenu = document.querySelector(".burger_menu");
const navLinks = document.querySelector(".nav-links");

burgerMenu.addEventListener("click", () => {

  
  navLinks.classList.toggle(".mobile-menu");
});

当我打开 Inspect => Console 时，它​​显示：“未捕获的 TypeError：无法读取 null 的属性（读取 'addEventListener'） at nav.js:11:12”

这适用于这个法国人的视频，但我想知道是不是代码错了？我没看到拼写错误？

有什么建议吗？任何帮助都将不胜感激！ 🙏

//视频来自： https://www.youtube.com/watch?v=HQopEEurQYE&ab_channel=LiveCode

[HTML] 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/generel.css" />
    <link rel="stylesheet" href="css/layout.css" />
    <title>Grid Example 01</title>
  </head>
  <body>
    <header>
      <nav class="navbar">
        <a class="logo" href="index.html">Amalia</a>
        <div class="nav-links">
          <ul>
            <li><a class="active" href="#">FORSIDE</a></li>
            <li><a href="#">OPGAVER</a></li>
            <li><a href="#">OM MIG</a></li>
          </ul>
        </div>
        <img
          class="burger-menu"
          src="./icons/burger_btn.png"
          alt="burger menu"
        />
      </nav>
    </header>

    <main class="grid_1-1">
      <section>
        <h1>Om Mig</h1>
        <hr />
        <p>
          Mit navn er blaaaaah, og jeg i gang med min nuværende
          uddannelse på blaaah, som multimedie- og design student!
        </p>
        <p>
          Uddannelsen fandt min interesse, da jeg altid har været på den
          kreative side, og jeg vil generelt gerne udforske og lære mulighederne
          inden for frontend og web design, hvilket Multimedie- og design
          uddannelsen bringer.
        </p>
        <p>
          Min tidligere uddannelse på blaaaah mediefagslinje på
          engelsk, har erfaret mig med med programmer såsom: Photoshop, Premier
          Pro, Final Cut Pro - men også banet vej for mit freelance arbejde som
          fotograf.
        </p>

        <p>
          Således, tror jeg også mine generelle interesser og kompetencer inden
          for kunst, fotografi, filmproduktion og videoredigering - har bragt
          mig på disse baner.
        </p>

        <p>Så alt i alt, har den kreative industri har altid lokket mig!</p>
        <div class="box-btn-i">
          <ul>
            <li>
              <a
                class="btn"
                href="./data/info.txt"
                download="CV_Amalia"
                >CV</a
              >
            </li>
            <li><a class="btn" href="about.html">PROJEKTER</a></li>
          </ul>
        </div>
      </section>

      <img src="/img_ama/mig_amalia.jpg" alt="amalia" />
    </main>

    <footer>
      <p>&copy;Amalia 2023</p>
      <ul>
        <li>
          <a href="#">LinkedIn</a>
        </li>
        <li>
          <a href="#">Instagram</a>
        </li>
      </ul>
    </footer>
  </body>
  <script src="nav.js"></script>
</html>

[此 CSS] 

body {
  margin: 0;
  /* De næste tre linjer er for at lave en "sticky footer" */
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

main {
  padding: 1em;
}

img {
  max-width: 100%;
}

nav > ul {
  list-style: none;
  /* De næste fire linjer placerer menuen i center */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  padding: 0;
}

@media (min-width: 800px) {
  .grid_1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    max-width: 1200px;
    justify-self: center;
  }
}

.navbar .burger-menu {
  display: none;
  position: absolute;
  width: 35px;
  top: 50px;
  right: 50px;
}

@media screen and (max-width: 900px) {
  .navbar {
    padding: 0;
  }

  .navbar .logo {
    position: absolute;
    top: 50px;
    left: 50px;
  }

  .nav-links {
    /* display: none; */
    top: 0;
    left: 0;
    position: absolute;
    background-color: rgba(146, 189, 202, 0.252);
    backdrop-filter: blur(7px);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -100%;
    transition: all 0.8s ease;
  }

  .nav-links ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .navbar .nav-links ul li {
    margin: 25px;
    font-size: 2em;
  }

  .navbar .burger-menu {
    display: block;
  }
}

我尝试过其他解决方案，但似乎都没有用。只需要一个简单的 js 代码，没有什么复杂的，因为我是初学者，所以我也非常怀疑我对这个问题的了解。 （我们不允许使用框架，但这是必需的，他们还没有教我们如何实现汉堡菜单/它被忽略了......）。

感谢所有人尝试并阅读此文。

2个回答

您收到错误，因为 burgermenu 未定义。这是因为您像这样声明了它 document.querySelector(".burger_menu"); ，其中用了下划线而不是 - 符号。 基本上 querySelector 找不到具有该类的元素，因为 "burger_menu" != "burger-menu" 。正确的代码应该是： 

document.querySelector(".burger-menu");
user20666769
2023-01-10

脚本中似乎有一个拼写错误， burger-menu 应该代替 burger_menu 。请注意下划线与破折号。类名必须完全匹配。

HTML 代码在 img 标签上定义了 class="burger-menu" ，而脚本通过 document.querySelector(".burger_menu") 查询不存在的类。

可能的修复方法是简单地使用 document.querySelector(".burger-menu") 。

Przemysław Zalewski
2023-01-10