【问题标题】：Uncaught TypeError when I click on mobile menu icon - Javascript单击移动菜单图标时未捕获的 TypeError - Javascript
【发布时间】：2022-06-16 12:16:58
【问题描述】：

我正在做这个网站：https://marco95op.github.io/sunnyside-agency-landing-page-main/ 我只做了移动部分所以使用响应式工具查看，问题是我的菜单不适用于我在js中编写的sn-p代码：

"use strict";

const hamburgerIcon = document.querySelector(".hamburger-icon");
const navLinks = document.querySelectorAll(".nav-links");
const nav = document.querySelector("navbar");

hamburgerIcon.addEventListener("click", () =>{
   nav.classList.toggle("active");
});

navLinks.forEach(function (nav){
    nav.addEventListener("click", function(){
        console.log(this);
    });
});

.nav-links.active{
    display: block;
}

<img class ="hamburger-icon" src="./images/icon-hamburger.svg" alt="hamburger">
      
      <nav id="navbar">
          <ul class="nav-links">
            <li><a href="#">About</a></li> 
            <li><a href="#">Services</a></li> 
            <li><a href="#">Projects</a></li> 
            <li><button><a href="#">Contact</a></button></li> 
          </ul>
      </nav>

这里是回购：https://github.com/marco95OP/sunnyside-agency-landing-page-main.git

【问题讨论】：

请阅读Something on my web site doesn't work. Can I just paste a link to it?。当外部资源消失或固定时，依赖于外部资源来理解的问题变得毫无用处。创建一个minimal reproducible example 并将其放入问题本身。 Stackoverflow 确实支持inline live demos
doesn't work 不是对问题的有用描述

标签： javascript html css mobile responsive

【解决方案1】：

querySelector()

querySelector() 用于选择需要提及 id # 和类 . 和名称的元素。
.active class add than display:flex; and else display:none;.

什么是代码中的问题

document.querySelector("nav-links"); 到 document.querySelector("#navbar"); 指定 id 并选择正确的元素。
在css中添加#navbar{display: none;}。如果元素没有 .active 类而不是显示无。

const hamburgerIcon = document.querySelector(".hamburger-icon");
const navLinks = document.querySelectorAll(".nav-links");
const nav = document.querySelector("#navbar");

hamburgerIcon.addEventListener("click", () =>{
   nav.classList.toggle("active");
});

navLinks.forEach(function (nav){
    nav.addEventListener("click", function(){
        console.log(this);
    });
});

    
   #navbar.active{
      display: block;
  }#navbar{display: none;}

<img class="hamburger-icon" src="./images/icon-hamburger.svg" alt="hamburger">
      
      <nav id="navbar">
          <ul class="nav-links">
            <li><a href="#">About</a></li> 
            <li><a href="#">Services</a></li> 
            <li><a href="#">Projects</a></li> 
            <li><button><a href="#">Contact</a></button></li> 
          </ul>
      </nav>

【讨论】：