My javascript is not working, kindly help. below is my code-CodePudding

const hamburger = document.querySelector(".header .nav-bar .navlist .hamburger");
const mobile_menu = document.querySelector(".header .nav-bar .navlist ul");
const header = document.querySelector(".header .container");

hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
mobile_menu.classList.toggle("active");
});

html code

<section id="header">
  <div class="header container">
    <div class="nav-bar">
      <div class="brand">
        <a href="#hero"><h1>OUR WEBSITE</h1></a>
      </div>
      <div class="nav-list">
        <div class="hamburger"><div class="bar"></div></div>
        <ul>
          <li><a href="#" data-after="Home">Home</a></li>
          <li><a href="#" data-after="Services">Services</a></li>
          <li><a href="#" data-after="Projects">Projects</a></li>
          <li><a href="#" data-after="Our C.E.O">About Us</a></li>
          <li><a href="#" data-after="Contact Us">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

CSS Code

             #header .hamburger .bar::after,
             #header .hamburger .bar::before {
             content: "";
             position: absolute;
             height: 100%;
             width: 100%;
             left: 0;
             background-color: white;
             transition: 0.3s ease;
             transition-property: top, bottom;
             }
             #header .hamburger .bar::after {
             top: 8px;
             }
             #header .hamburger .bar::before {
             bottom: 8px;
             }
             #header .hamburger.active .bar::before {
             bottom: 0;
             }
             #header .hamburger.active .bar::after {
             top: 0;
             }

When I open this code in live server, the hamburger click is not responding, my JavaScript is already linked to the html. I need a solution to help my js work/respond.

CodePudding user response：

You wrong in selector at .navlist -> .nav-list. So I fixed 2 rows:

.header .nav-bar .navlist .hamburger -> .header .nav-bar .nav-list .hamburger

.header .nav-bar .navlist ul -> .header .nav-bar .nav-list ul

Based on your code, I update it and let it works. You can check the below demo:

const hamburger = document.querySelector(".header .nav-bar .nav-list .hamburger");
const mobile_menu = document.querySelector(".header .nav-bar .nav-list ul");
const header = document.querySelector(".header .container");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle('active');
  mobile_menu.classList.toggle('active');



});

<section id="header">
  <div class="header container">
    <div class="nav-bar">
      <div class="brand">
        <a href="#hero">
          <h1>OUR WEBSITE</h1>
        </a>
      </div>
      <div class="nav-list">
        <div class="hamburger">
          <div class="bar">Bar</div>
        </div>
        <ul>
          <li><a href="#" data-after="Home">Home</a></li>
          <li><a href="#" data-after="Services">Services</a></li>
          <li><a href="#" data-after="Projects">Projects</a></li>
          <li><a href="#" data-after="Our C.E.O">About Us</a></li>
          <li><a href="#" data-after="Contact Us">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

const hamburger = document.querySelectorAll(
  ".header,.nav-bar,.nav-list,.hamburger"
);
const mobile_menu = document.querySelectorAll(
  ".header,.nav-bar,.nav-list > ul"
);
const header = document.querySelectorAll(".header,.container");

for (const item of hamburger) {
  item.onclick = () => {
    item.classList.toggle("active");
  };
}

for (const item of mobile_menu) {
  item.onclick = () => {
    item.classList.toggle("active");
  };
}