Javascript 如何将onclick JS转换为click事件侦听器？

这是我的代码笔，显示了onclick和javascript代码。我正在尝试将JS转换为addEventListener，但无法使其工作

HTML

删除

onClick

并包括

addEventListener

等

menuIcon.addEventListener('click', showMenu);
hideMenuIcon.addEventListener('click', hideMenu);

id

应该是唯一的，但是您在两个地方使用它，您可以像下面的代码片段那样修改它们

我已经包括了新的

id

，用于关闭一个和所选元素，如

const hideMenuIcon = document.querySelector('#hide-menu-bars')

和下面的片段

const menuIcon=document.querySelector（“#菜单栏”）
const hideMenuIcon=document.querySelector（“#隐藏菜单栏”）
const sideMenu=document.querySelector（“#导航菜单”）
函数showMenu（）{
如果（真）{
sideMenu.classList.add（'active'）
}
}
函数hideMenu（）{
如果（真）{
sideMenu.classList.remove（'active'）
}
} 
menuIcon.addEventListener（“单击”，显示菜单）；
hideMenuIcon.addEventListener（'click'，hideMenu）
*{
框大小：边框框；
保证金：0；
填充：0；
字体系列：Arial、Helvetica、无衬线字体；
}
#导航栏{
背景色：#212121；
高度：100px；
显示器：flex；
证明内容：开始；
对齐项目：居中；
}
#菜单栏{
左边距：2em；
字号：2rem；
颜色：#fff；
} 
#隐藏菜单栏{
左边距：2em；
字号：2rem；
颜色：#fff；
} 
#导航菜单{
背景:#212121 ;；
宽度：250px；
高度：100vh；
显示器：flex；
证明内容：中心；
位置：固定；
排名：0；
左-100%；
转换：450ms；
}
#nav-menu.active{
左：0；
转换：450ms；
}
.导航文本{
显示器：flex；
证明内容：开始；
列表样式：无；
高度：50px；
填充：1rem；
}

文件

删除
onClick
并包括
addEventListener
等

menuIcon.addEventListener('click', showMenu);
hideMenuIcon.addEventListener('click', hideMenu);

id
应该是唯一的，但是您在两个地方使用它，您可以像下面的代码片段那样修改它们

我已经包括了新的
id
，用于关闭一个和所选元素，如

const hideMenuIcon = document.querySelector('#hide-menu-bars')


和下面的片段


const menuIcon=document.querySelector（“#菜单栏”）
const hideMenuIcon=document.querySelector（“#隐藏菜单栏”）
const sideMenu=document.querySelector（“#导航菜单”）
函数showMenu（）{
如果（真）{
sideMenu.classList.add（'active'）
}
}
函数hideMenu（）{
如果（真）{
sideMenu.classList.remove（'active'）
}
} 
menuIcon.addEventListener（“单击”，显示菜单）；
hideMenuIcon.addEventListener（'click'，hideMenu）
*{
框大小：边框框；
保证金：0；
填充：0；
字体系列：Arial、Helvetica、无衬线字体；
}
#导航栏{
背景色：#212121；
高度：100px；
显示器：flex；
证明内容：开始；
对齐项目：居中；
}
#菜单栏{
左边距：2em；
字号：2rem；
颜色：#fff；
} 
#隐藏菜单栏{
左边距：2em；
字号：2rem；
颜色：#fff；
} 
#导航菜单{
背景:#212121 ;；
宽度：250px；
高度：100vh；
显示器：flex；
证明内容：中心；
位置：固定；
排名：0；
左-100%；
转换：450ms；
}
#nav-menu.active{
左：0；
转换：450ms；
}
.导航文本{
显示器：flex；
证明内容：开始；
列表样式：无；
高度：50px；
填充：1rem；
}

文件

您只需找到
id
并向其添加事件侦听器即可。大概是这样的：


const menuIcon=document.querySelector（“#菜单栏”）
const sideMenu=document.querySelector（“#导航菜单”）
menuIcon.addEventListener（'click'，function（）{
sideMenu.classList.add（'active'）
})
sideMenu.addEventListener（'click'，function（）{
sideMenu.classList.remove（'active'）
})
*{
框大小：边框框；
保证金：0；
填充：0；
字体系列：Arial、Helvetica、无衬线字体；
}
#导航栏{
背景色：#212121；
高度：100px；
显示器：flex；
证明内容：开始；
对齐项目：居中；
}
#菜单栏{
左边距：2em；
字号：2rem；
颜色：#fff；
} 
#导航菜单{
背景:#212121 ;；
宽度：250px；
高度：100vh；
显示器：flex；
证明内容：中心；
位置：固定；
排名：0；
左-100%；
转换：450ms；
}
#nav-menu.active{
左：0；
转换：450ms；
}
.导航文本{
显示器：flex；
证明内容：开始；
列表样式：无；
高度：50px；
填充：1rem；
}

文件

您只需找到
id
并向其添加事件侦听器即可。大概是这样的：


const menuIcon=document.querySelector（“#菜单栏”）
const sideMenu=document.querySelector（“#导航菜单”）
menuIcon.addEventListener（'click'，function（）{
sideMenu.classList.add（'active'）
})
sideMenu.addEventListener（'click'，function（）{
sideMenu.classList.remove（'active'）
})
*{
框大小：边框框；
保证金：0；
填充：0；
字体系列：Arial、Helvetica、无衬线字体；
}
#导航栏{
背景色：#212121；
高度：100px；
显示器：flex；
证明内容：开始；
对齐项目：居中；
}
#菜单栏{
左边距：2em；
字号：2rem；
颜色：#fff；
} 
#导航菜单{
背景:#212121 ;；
宽度：250px；
高度：100vh；
显示器：flex；
证明内容：中心；
假定