Skip to content
Advertisement

Uncaught TypeError: Cannot read property ‘style’ of null at HTMLButtonElement

when trying to press nav-toggle icon to appear the navbar content, i get this error.

<nav>
            <button id="nav-toggle" class="hamburger-menu">
                <span class="strip"></span>
                <span class="strip"></span>
                <span class="strip"></span>
            </button>
            <ul class="nav-menu-container">
                <li><a href="#">Home</a></li>
                <li><a href="#">Games</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>

here is my javascript:

<script>
        document.getElementById('nav-toggle').addEventListener('click', function () {
        let navMenu = document.getElementById('nav-menu-container');
        navMenu.style.display = (navMenu.offsetParent === null  ? 'block' : 'none');
    });
</script>

Advertisement

Answer

You should use the id attribute for the ul since you are trying to get it using getElementById.

<ul id="nav-menu-container">
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement