Question

我是JavaScript的新手，并且在HTML页面的底部添加了JS。我检查了选择器，动作和所有似乎匹配的东西。但是，当我尝试使用JS功能时，似乎什么也没有发生。好像根本没有JS。

尝试检查选择器和操作是否有效。尝试检查我的标记中是否包含脚本标记。

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;
}

可以在此处找到完整的项目以获取更多信息：https://github.com/aleblok70/website。

期望的结果是包括对点击转换的操作：translateX（0）;实际结果是点击没有任何反应。

Answer 1

您正在基于id将侦听器添加到元素-

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

但是您的样式基于类-这是正确的吗？

.close {..}

这些必须相同-因此，如果id正确，则应该为

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

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

1 个答案: