i try to create a navbar but my javascript code doesn't work

Question

so hello i'm trying to create a navbar and things were going pretty well , but when i was working at the responsivity of the navbar my addeventlistener function doesn't work: here's my html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="app.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Nav</title>
</head>
<body>
    <nav class="navbar">
        <h4 class="logo">Nav</h4>
        <ul class="navlinks">
            <li>
                <a href="#" >Home</a>
            </li>
            <li>
                <a href="#" >Work</a>
            </li>
            <li>
                <a href="#" >About us</a>
            </li>
            <li>
                <a href="#" >Projects</a>
            </li>
        </ul>
        <div class="burger">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
    </nav>
</body>
</html>

my css:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.navbar{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: black;
    font-family:  'Poppins', sans-serif;
}
.logo{
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 5px;
}
.navlinks{
    display: flex;
    justify-content: space-around;
    width: 30%;
}
.navlinks a:hover{
    background-color: rgb(37, 156, 196);
}
.navlinks li{
    list-style: none;
}
.navlinks a{
    color: white;
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}
.burger{
    cursor: pointer;
    display: none;
}
.burger div{
    width: 25px;
    height: 2px;
    background-color: white;
    margin: 5px;

}
@media screen and (max-width:1024px){
    .navlinks{
        width: 60%;
    }
}
@media screen and (max-width:768px){
    body{
        overflow-x: hidden;
    }
    .navlinks{
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: black;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    .navlinks li{
        opacity: 0;
    }
    .burger{
        display: block;
    }
}
.nav-active{
    transform: translateX(0%);
}
@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

and here's my javascript code:

const navSlide = () => {
    const burger = document.querySelector('.burger')
    const nav = document.querySelector('.navlinks')

    burger . addEventListener('click',()=>{
        nav.classList.toggle('nav-active')
    })
}

navSlide();

i am pretty new at this forum but i heard that it was the most popular one and my code lines were making me mad so yeah and thanks again for answering my post

You're executing your JavaScript before the elements have been created — j08691, Aug 13 '20 at 17:13
It looks like your javascript is running before your html code is created. Try moving your ` — ug_, Aug 13 '20 at 17:13
oh that was the problem thanks again for answering the error was pretty dumb though — Ninja, Aug 13 '20 at 17:20

score 0 · Accepted Answer · answered Aug 13 '20 at 20:59

glad to see you're new here and decided to join!

Without using jQuery, you can use this:

const navSlide = () => {
    const burger = document.querySelector('.burger')
    const nav = document.querySelector('.navlinks')

    burger . addEventListener('click',()=>{
        nav.classList.toggle('nav-active')
    })
}

document.addEventListener("DOMContentLoaded", function(event) { 
  navSlide();
});

Put basically, this code will wait until the page loads (so that all elements exist within the DOM which means document.querySelector will work) and then it attaches the event listener. This is best practice to avoid issues with slow rendering browsers and such without relying on the browser to render the script last.

i try to create a navbar but my javascript code doesn't work

1 Answers1