Home > Net >  Why is toggle active not working in the below code?
Why is toggle active not working in the below code?

Time:04-09

I am confused by the steps on how to post code on stackoverflow. Please look at codepen for entire code:

Codepen

        const hamburger = document.querySelector(".hamburger");
        const navMenu = document.querySelector(".nav-menu");

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

        document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
            hamburger.classList.remove("active");
            navMenu.classList.remove("active");
        }))

Sorry, trying to learn by playing with html, css, and javascript from scratch. I was wondering how to build a hamburger menu from scratch. Looked up some tutorial on youtube. Copied the code. The hamburger menu is clickable and changes to a drop down navigation bar. And clicking it again, returns it back to a hamburger menu. Developer tool shows the hamburger class changes to hamburger active then back to hamburger class. But when I added the grid container code under the navbar class, the hamburger menu no longer responds to clicks. I don't know why it no longer toggle to active. Can someone please explain. Thanks.

CodePudding user response:

It's a tipo error:

<textarea id="descript" name="description" placeholder="detail description*" rows="1" column="8"> </textarea>

You must close the "<textarea"

  • Related