Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') is there an update?

I am trying to make a simple hamburger menu for my website but i keep getting this error. When i add an event listener to wait for a click on the hamburger button to display the nav bar content, could you please help me ?

This my javascript code

const hamburgerButton = document.getElementById('hamburger')
const navList = document.getElementById('nav-list');

function toggleButton(){
    navList.classList.toggle('show')
}

hamburgerButton.addEventListener('click', toggleButton);

This is my CSS code

.hamburger{
    display: none;
}

@media only screen and (max-width: 1000px){
    .hamburger{
        display: block;
        border: 0;
        background-color: transparent;
        color: var(--text-color);
        font-size: 1.8rem;
    }

    ul{
        display: none;
    }
}

ul{
    display: flex;
    list-style-type: none;
    width: 500px;
    justify-content: space-around;
}

ul.show{
    display: block;
}

and finally this is my html code

<section class="hero">
        <nav>
            <div>LOGO</div>
            <ul id="nav-list">
                <li><a href="#about-me">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact-me">Contact me</a></li>
            </ul>
            <button class="hamburger" id="hamburger">
                <i class="fa-solid fa-bars"></i>
            </button>
        </nav>