javascript - “未捕获的TypeError:无法读取null的属性'addEventListener'”

我试着用一些点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

最佳答案

在“burger”的查询选择器中将其设置为
const burger = document.querySelector("#burger");
这是一个id，所以我们用“#”点“.”代表类

Burger

javascript - “未捕获的TypeError:无法读取null的属性'addEventListener'”