css javascript active function not working

Question

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

HTML code is as follows:

<div class="navigation">

                <a href="#" class="hamburger">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                  </a>

                <div class="nav-link-wrapper">
                    <a href="index.html">Home</a>
                </div>


                <div class="nav-link-wrapper">
                    <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.

Answer 1

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 class="navigation">

    <a href="#" class="hamburger">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>

    <div class="nav-link-wrapper">
        <a href="index.html">Home</a>
    </div>


    <div class="nav-link-wrapper">
        <a href="contact.html">Contact</a>
    </div>

</div>