Javascript 如何使用addEventListener保持我的类更改？

constchangenavbutton=（）=>{
const navbarBox=document.queryselectoral（“.navbar图标框”）；
navbarBox.forEach（（框）=>{
box.addEventListener（“单击”，（事件）=>{
const navbarBoxActive=document.querySelector（“.navbar图标框激活”）
navbarBoxActive.classList.remove（“导航栏图标框激活”）
event.currentTarget.classList.add（“导航栏图标框激活”）；
console.log（event.currentTarget）；
});
});
};
changeNavbarButton（）
.navbar{
背景色：#161616；
宽度：100%；
高度：50px；
位置：固定；
底部：0；
填充：0；
显示器：flex；
证明内容：周围的空间；
z指数：100；
}
.导航栏图标框{
身高：100%；
显示器：flex；
flex:1自动；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
放置项目：中心；
文本对齐：居中；
}
.navbar图标框p{
字体大小：10px；
颜色：白色；
}
.导航栏图标框处于活动状态{
背景色：#1F；
}
.navbar图标框处于活动状态p{
颜色：橙色；
}

家

事件

侧面图

由于变量的生命周期，可能会出现问题

我建议您使用下面的代码，在addEventListeners上不使用
navbarBoxActive

const changeNavbarButton = () => {

  //const navbarBoxActive = document.querySelector(".navbar-icon-box-active")
  const navbarBox = document.querySelectorAll(".navbar-icon-box");

  navbarBox.forEach((box) => {
    box.addEventListener("click", (event) => {
      document.querySelector(".navbar-icon-box-active").classList.remove("navbar-icon-box-active")
      event.currentTarget.classList.add("navbar-icon-box-active");
      console.log(event.currentTarget);
    });
  });
};

changeNavbarButton();

或

看不出有什么问题。你能发一个帖子吗？对不起，我是一个新的开发人员，仍然没有良好的实践。。。我添加了我的HTML和CSS文件，希望这将有助于重现环境我制作了一个堆栈片段，但正如您运行它时看到的，它不会产生您描述的问题。你能编辑它以便运行它会导致问题，从而可以调试它吗？好的，谢谢你，我对代码做了一些修改，但是我不能完全重现我在本地主机上遇到的错误（当我点击按钮时不会发生任何事）。然而，我编写的函数在这里似乎不能与代码段一起正常工作，你知道如何修复它吗？它与代码段一起工作！谢谢：）我可能知道了为什么它没有出现在我的本地主机中：我想这是因为我的标记链接和它的
href
，我应该把我的类放在div中，我要试试。问题是预定义的变量引用了错误的节点，而类引用器在不断变化。
const changeNavbarButton = () => {

  const navbarBox = document.querySelectorAll(".navbar-icon-box");

  navbarBox.forEach((box) => {
    box.addEventListener("click", (event) => {
      const navbarBoxActive = document.querySelector(".navbar-icon-box-active");
      navbarBoxActive.classList.remove("navbar-icon-box-active")
      event.currentTarget.classList.add("navbar-icon-box-active");
      console.log(event.currentTarget);
    });
  });
};

changeNavbarButton();