我的 JavaScript 不起作用。 我怎么解决这个问题？

Question

I'm new to JavaScript, and I've included JS at the bottom of my HTML page. I checked the selectors, actions and everything seems to match. However, when I try to use JS functionality nothing seems to happen; as if there is no JS at all.

Tried checking if the selectors and actions are valid. Tried checking if I included the script tags within my tag.

const navBtn = document.getElementById("nav-btn");
const navBar = document.getElementById("navbar");
const navClose = document.getElementById("close");

navBtn.addEventListener("click", () => {
 navBar.classList.add("showNav");
});
navClose.addEventListener("click", () => {
 navBar.classList.remove("showNav");
});

.showNav {
  transform: translateX(0%);
}
.close {
  color: var(--mainWhite);
  font-size: 2.1rem;
  cursor: pointer;
}
.close:hover {
  color: var(--mainDark);
  padding-left: 0.2rem;
}

Complete project can be found here for more information: https://github.com/aleblok70/website .

Desired result was to include action on click transform: translateX(0); actual results were that nothing happens on click.

Answer 1

You are adding the listener to the element based on an id -

const navClose = document.getElementById("close");

but your styling is based on a class - is this correct?

.close {..}

These need to be the same - so if the id is correct then it should be

#close {
  color: var(--mainWhite);
  font-size: 2.1rem;
  cursor: pointer;
}
#close:hover {
  color: var(--mainDark);
  padding-left: 0.2rem;
}