CSS: menu icon animation

Why this code doesn’t work for me totally?
No animation or effect when I press it on the browser.

This is HTML snippet:

<!-- Menu Bars -->
<div class="menu-bars" id="menu-bars">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

The CSS snippet:

.menu-bars {
  position: fixed;
  top: 1rem;
  right: 2rem;
  display: inline-block;
  cursor: pointer;
  z-index: 11;
}
.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 2px;
  background-color: #fff;
  margin: 8px 0;
  transition: 0.4s;
}
.change .bar1 {
  transform: rotate(-45deg) translate(-7px, 8px);
}
.change .bar2 {
  opacity: 0;
}
.change .bar3 {
  transform: rotate(45deg) translate(-6px, -8px);
}

JavaScript Code:

const menuBars = document.getElementsById("menu-bars");
function toggleNav() {
    menuBars.classList.toggle("change");    
}
menuBars.addEventListener("click", toggleNav);

>Solution :

It is getElementById, not getElementsById, like

const menuBars = document.getElementById("menu-bars");