“未捕获的 TypeError：无法读取 null 的属性‘addEventListener’”答案

【问题标题】："Uncaught TypeError: Cannot read property 'addEventListener' of null"“未捕获的 TypeError：无法读取 null 的属性‘addEventListener’”
【发布时间】：2019-05-06 22:37:29
【问题描述】：

我尝试制作一个带有一些点 HTML 和 CSS 的导航开启器工作正常，但脚本无法正常工作。非常感谢任何帮助。

我的代码：

const burger = document.querySelector(".burger");
const navLinks = document.querySelector(".item-menu");
const links = document.querySelectorAll(".list");


burger.addEventListener("click", () => {
  navLinks.classList.toggle("open");
});

* {
  margin: 0px;
  padding: 0;
}

body {
  font-family: cursive, sans-serif, fantasy;
  background-color: #f3f3f4
}

nav {
  height: 12vh;
  background-color: #0303;
  display: block;
}

.item-menu {
  display: flex;
  list-style: none;
  justify-content: space-around;
  align-items: center;
  width: 50%;
  height: 100%;
  margin-left: auto;
  cursor: pointer;
}

.a
/* menu words */

{
  text-decoration: none;
  list-style: none;
  color: black;
}


/*---------------------------------PHONE---------------------------------*/

@media only screen and (max-width: 750px) {
  /*   BURGER NAV DOTS    */
  .dot {
    float: right;
    display: block;
    height: 25px;
    width: 25px;
    border-radius: 50%;
  }
  #burger:hover {
    cursor: pointer;
  }
  #burger:hover .dot:nth-child(1) {
    box-shadow: 0 0 10px #fff900;
  }
  #burger:hover .dot:nth-child(2) {
    box-shadow: 0 0 10px #08ff28;
  }
  #burger:hover .dot:nth-child(3) {
    box-shadow: 0 0 10px #ff005a;
  }
  #burger:hover .dot:nth-child(4) {
    box-shadow: 0 0 10px #3896ff;
  }
  /*       DOTS       */
  #burger .dot:nth-child(1) {
    background-color: #fff900;
    animation: animate 2s linear inifinite;
  }
  #burger .dot:nth-child(2) {
    background-color: #08ff28;
    animation: animate 2s linear inifinite;
  }
  #burger .dot:nth-child(3) {
    background-color: #ff005a;
    animation: animate 2s linear inifinite;
  }
  #burger .dot:nth-child(4) {
    background-color: #3896ff;
    animation: animate 2s linear inifinite;
  }
  #burger {
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
    width: 50px;
    height: 50px;
  }
  nav {
    position: relative;
  }
  .item-menu {
    position: fixed;
    top: 2%;
    left: -5%;
    height: 85vh;
    width: 100%;
    clip-path: inset(0px 0px 692px 612px);
    -webkit-clip-path: inset(0px 0px 692px 612px);
    pointer-events: none;
    cursor: pointer;
    display: flex;
    width: 84%;
    height: 84%;
    transition: all 1s ease-out;
    align-items: center;
  }
  .a {
    position: absolute;
    top: 3%;
  }
  .item-menu.open {
    clip-path: inset(0px 0px 692px 0px);
    -webkit-clip-path: inset(0px 0px 692px 0px);
    transition: all 1s ease-out;
    pointer-events: all;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title> BURGER NAV </title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--STYLESHEET-->
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <nav>
    <div id="burger">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>

    <ul class="item-menu">
      <li class="list"><a class="a" href=""> Home </a></li>
      <li class="list"><a class="a" href=""> Portfoglio </a></li>
      <li class="list"><a class="a" href=""> Experiences </a></li>
      <li class="list"><a class="a" href=""> About me </a></li>
      <li class="list"><a class="a" href=""> Contact </a></li>
    </ul>

  </nav>

</body>

</html>

我的问题：

嗯，按钮似乎无法正常工作，我不明白为什么。他们告诉我脚本未加载，并将其放在正文的末尾并且已经加载。我试图改变一些类，添加更多类，做一个功能......以上都没有工作......

我需要帮助...我快要崩溃了 :)) =)) 也许编码不适合我 :X

【问题讨论】：

标签： javascript html button addeventlistener divide

【解决方案1】：

在 'burger' 的 querySelector 中将其设置为 const burger = document.querySelector("#burger"); 这是一个 id，所以我们使用 '#' 点 '.'是为了上课

【讨论】：

【解决方案2】：

HTML DOM querySelector() Method 返回与文档中指定的 CSS 选择器匹配的第一个元素。因此，要通过 Id 获取元素，您应该使用 HTML DOM getElementById() Method 返回具有指定值的 ID 属性的元素。

const burger = document.getElementById("burger");
const navLinks = document.querySelector(".item-menu");
const links = document.querySelectorAll(".list");

burger.addEventListener("click", () => 
{
    navLinks.classList.toggle("open");
});

【讨论】：