my responsive Navbar bin doesn’t work, why?

i was making my Scroll project,with all transitions etc. I started with responsive Navbar,everyrhing was good but the moment when I press the button and my lists open doesn’t work, how I can fix it?

here is my js code:

const btn = document.getElementsByClassName('nav-btn')[0];
const links = document.getElementsByClassName('navbar-links')[0];

btn.addEventListener('click',()=>{
    links.classList.toggle('active')
})

here is css:

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

body{
    margin: 0;
    padding: 0;
}
  
.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
}
  
.change .bar2 {opacity: 0;}
  
.change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
}

#nav{
    background-image: url("images/page.jpg");
    height: 800px;
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-position:center;
}

.nav-header h1{
    padding-left: 10px;
    font-size: 1.6rem;
}


.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
}

.navbar-links ul{
    margin: 0;
    padding: 0;
    display: flex;
    font-size: 1.2rem;
}

.navbar-links li{
    list-style: none;
}

.navbar-links li a{
    text-decoration: none;
    color: black;
    display: block;
    padding: 1rem;
}

.nav-btn{
    background-color: white;
    display: none;
    cursor: pointer;
    border: none;
    position: absolute;
    right: 5px;
    top: 12px;
}

and here is html:

  <header id="home">
    <div id="nav">
      <nav class="navbar">
        <div class="nav-header">
          <h1>Menu</h1>

          <button class="nav-btn" onclick="this.classList.toggle('change');">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
          </button>
        </div>
        <div class="navbar-links">
          <ul>
            <li><a href="#home" class="scroll">home</a></li>
            <li><a href="#about" class="scroll">about</a></li>
            <li><a href="#services" class="scroll">services</a></li>
          </ul>
        </div>
      </nav>
    </div>

    <div class="banner">
      <div class="container">
        <h1>scroll project</h1>
        <p>wsjnciunclsnjiemc ljfnjdc cinufifl,vlfldlvlekfopec ciun ck cipn i inrc cijan9pnc cipqe</p>
        <button class="scroll-link-btn"><a href="#tursr">Explore Tours</a></button>
      </div>
    </div>
  </header>

so,how can I fix it?Will be pleased for the solution!

Thank you for help!