css javascript active function not working-CodePudding

Trying to create a basic drop down menu that appears once size of screen reaches certain pixels.

HTML code is as follows:

<div >

                <a href="#" >
                    <span ></span>
                    <span ></span>
                    <span ></span>
                  </a>

                <div >
                    <a href="index.html">Home</a>
                </div>


                <div >
                    <a href="contact.html">Contact</a>
                </div>

            </div>

Have a Javascript code that goes like this:

const toggleButton = document.getElementsByClassName('hamburger')[0]
const navbarLinks = document.getElementsByClassName('nav-link-wrapper')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

And my CSS code goes like:

@media only screen and (max-width: 650px) {
    .hamburger{
        display: block;
    }

    .navigation{
        /* display: none; */
        display: flex;
        justify-content: space-between;
        padding: 30px;
        border-bottom: 2px solid rgb(185, 22, 22);
        border-top: 2px solid rgb(185, 22, 22);
        font-size: large;
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-link-wrapper{
        display: none;
        width: 100%;
        text-align: center;
        /* padding-top: 10px; */
        flex-direction: column;
    }

    .nav-link-wrapper.active{  /*NOT GETTING ACTIVE*/
        display: flex;
        
    }

}

No matter what I try, the nav-link-wrapper.active does not happen. The nav bar does appear if I change display from 'none' to 'flex' so I know what it should look like, but the 'active' function from javascript doesnt seem to be doing anything.

CodePudding user response：

Your code should have been showing the first nav-link-wrapper on click. This would have been because you were only storing the FIRST element with class nav-link-wrapper in const navbarLinks due to [0].

In order to fix this, I've changed from getElementsByClassName, which produces a HTMLCollection which is more difficult to iterate, to querySelectorAll which produces an Array of elements.

Then inside your javascript, onclick you need to loop over all the elements stored inside navbarLinks by using forEach.

In order to produce a usable example, I've commented out the @media query and added a pseudo-element to show "TOGGLE"

const toggleButton = document.getElementsByClassName('hamburger')[0];
const navbarLinks = document.querySelectorAll('.nav-link-wrapper');

toggleButton.addEventListener('click', () => {
    navbarLinks.forEach((it) => {
        it.classList.toggle('active');
    });
});

/* @media only screen and (max-width: 650px) { */
    .hamburger:after { content:'TOGGLE' } /* Remove Me - Just for demo purposes */
    .hamburger{
        display: block;
    }

    .navigation{
        /* display: none; */
        display: flex;
        justify-content: space-between;
        padding: 30px;
        border-bottom: 2px solid rgb(185, 22, 22);
        border-top: 2px solid rgb(185, 22, 22);
        font-size: large;
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-link-wrapper{
        display: none;
        width: 100%;
        text-align: center;
        /* padding-top: 10px; */
        flex-direction: column;
    }

    .nav-link-wrapper.active{  /*NOT GETTING ACTIVE*/
        display: flex;
        
    }
/* } */

<div >

    <a href="#" >
        <span ></span>
        <span ></span>
        <span ></span>
      </a>

    <div >
        <a href="index.html">Home</a>
    </div>


    <div >
        <a href="contact.html">Contact</a>
    </div>

</div>