Nav icon not showing menu when clicked on

Question

Ideally, when I click on the nav icon, it will show a menu in which user can click on to navigate. However, it looks like the javascript isn't recognizing that the nav icon is being clicked on.

What it suppose to do is add the "open" class to the nav-main when the nav-icon is clicked on.

Nav source code:

<nav class="nav-main">
    <ul class="nav-list">
        <li>
            <a class="nav-logo" href="index.html">
                <img src="assets/logo/logo.png" alt="Logo" style="width: 50px; height: 45px;">
            </a>
        </li>
        <li class="with-sub">
            <a class="hvr-underline-from-center">
                <span> Projects</span>
                <svg width="9" height="5">
                    <polyline class="sub-arrow" fill="none" stroke="#999" points=".5 .5 4.5 4.5 8.5 .5"></polyline>
                </svg>
            </a>
            <ul class="sub">
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>

            </ul>


        </li>
        <li>
            <a class="hvr-underline-from-center"> About </a>
        </li>
        <li>
            <a class="hvr-underline-from-center" href="Contact/index.html"> Contact </a>
        </li>
        <li>
            <a class="hvr-underline-from-center" href="#footer-nav"> Navigate </a>
        </li>
    </ul>
    <span class="nav-icon">
        <svg width="18" height="11" viewBox="0 0 18 11">
          <path fill="#000" fill-rule="evenodd" d="M0,10 L18,10 L18,11 L0,11 L0,10 Z M0,5 L18,5 L18,6 L0,6 L0,5 Z M0,0 L18,0 L18,1 L0,1 L0,0 Z"></path>
        </svg>
      </span>

</nav>

Javascript code:

document.addEventListener("DOMContentLoaded", function() {
    var nav = document.querySelectorAll(".nav-main")[0];
    if (nav !== undefined) {
        var navIcon = nav.querySelector(".nav-icon");
        var list = nav.querySelector(".nav-list");
        if (navIcon) {
            navIcon.addEventListener("click", function() {
                nav.classList.toggle("open");
                document.body.classList.toggle("no-scroll");
                list.scrollTop = 0;
                document.querySelector("html").classList.toggle("no-scroll")
            })
        }
        var subs = document.querySelectorAll(".with-sub");
        for (i = 0, len = subs.length; i < len; i++) {
            sub = subs[i];
            sub.addEventListener("click", function(event) {
                var target;
                target = event.currentTarget.querySelector(".sub");
                target.classList.toggle("active")
            })
        }
    }
});

Answer 1

Your javascript appears to be working fine, but what about the css classes that are controlled by the javascript?

If I understand your problem correctly, I think you're needing something like this:

document.addEventListener("DOMContentLoaded", function() {
    var nav = document.querySelectorAll(".nav-main")[0];
    if (nav !== undefined) {
        var navIcon = nav.querySelector(".nav-icon");
        var list = nav.querySelector(".nav-list");
        if (navIcon) {
            navIcon.addEventListener("click", function() {
                nav.classList.toggle("open");
                document.body.classList.toggle("no-scroll");
                list.scrollTop = 0;
                document.querySelector("html").classList.toggle("no-scroll")
            })
        }
        var subs = document.querySelectorAll(".with-sub");
        for (i = 0, len = subs.length; i < len; i++) {
            sub = subs[i];
            sub.addEventListener("click", function(event) {
                var target;
                target = event.currentTarget.querySelector(".sub");
                target.classList.toggle("active")
            })
        }
    }
});

.hover-cursor { cursor: pointer; }

.nav-main .nav-list { display: none; }
.nav-main.open .nav-list { display: block; }

.sub { display: none; }
.sub.active { display: block; }

<nav class="nav-main">
    <span class="nav-icon hover-cursor">
		<svg width="18" height="11" viewBox="0 0 18 11">
		  <path fill="#000" fill-rule="evenodd" d="M0,10 L18,10 L18,11 L0,11 L0,10 Z M0,5 L18,5 L18,6 L0,6 L0,5 Z M0,0 L18,0 L18,1 L0,1 L0,0 Z"></path>
		</svg>
	</span>
	
	<a class="nav-logo" href="index.html">
		<img src="https://www.google.com/logos/doodles/2018/holidays-2018-northern-hemisphere-day-3-5708260869931008-s.png" alt="Logo">
	</a>
	
    <ul class="nav-list">
        <li class="with-sub">
            <a class="hvr-underline-from-center hover-cursor">
                <span>Projects</span>
                <svg width="9" height="5">
                    <polyline class="sub-arrow" fill="none" stroke="#999" points=".5 .5 4.5 4.5 8.5 .5"></polyline>
                </svg>
            </a>
            <ul class="sub">
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>

            </ul>


        </li>
        <li>
            <a class="hvr-underline-from-center"> About </a>
        </li>
        <li>
            <a class="hvr-underline-from-center" href="Contact/index.html"> Contact </a>
        </li>
        <li>
            <a class="hvr-underline-from-center" href="#footer-nav"> Navigate </a>
        </li>
    </ul>
</nav>