按钮单击文档，而不是在JavaScript文件中使用

我有一些问题，我需要写在js文件，而不是按钮点击有人帮助我请。我写了一些代码，但工作不正常

谢谢

document.getElementById（“box1”）.onclick=function（box）{
box.style.display='block'；
};
#框1{
位置：绝对位置；
顶部：10px；
左：10px；
宽度：260px；
高度：260px；
背景：#E2；
填充：20px；
显示：无；
}
弹出式界面
更多网页内容。。。



如果我理解正确，您正在尝试将js代码迁移到自己的文件中，以便能够切换元素显示

elements onclick方法在触发事件时接收要执行的函数。我们需要做的是在JS文件中构建一个函数，将该文件导入到我们的标记中，然后我们可以在elements onclick的标记中引用我们的新函数


函数显示框（）{
document.getElementById（“box1”）style.display='block'；
}
函数hideBox（）{
document.getElementById（“box1”）style.display='none'；
}
#框1{
位置：绝对位置；
顶部：10px；
左：10px；
宽度：260px；
高度：260px；
背景：#E2；
填充：20px；
显示：无；
}

弹出式界面
更多网页内容。。。

以下是一些代码，当您单击菜单按钮时，这些代码将关闭/打开面板。希望它能帮助你。它使用数据属性来协调哪个菜单按钮显示哪个面板


//抓取所有菜单按钮
const menuButtons=document.querySelectorAll（'.btn menu'）；
//将单击事件附加到每个按钮
menuButtons.forEach（button=>button.addEventListener（'click'，toggleButton，false））；
函数toggleButton（）{
//从单击的元素获取数据id
const id=this.dataset.id；
//拾取具有该id的面板元素
const panel=document.getElementById（id）；
如果（panel.style.display==='block'）{
panel.style.display='none'；
}否则{
panel.style.display='block'；
}
}
.panel{
顶部：20px；
左：10px；
宽度：100px；
高度：20px；
背景：#E2；
填充：20px；
显示：无；
}
弹出式界面
弹出式界面2
更多网页内容。。。

您需要更详细地描述您正在尝试做什么。你点击的是什么元素？要显示的元素是什么？因为，atm，看起来你试图点击一个隐藏的元素来显示它…？你好，安迪，我需要的是，我只需要js文件中的点击操作，他们正在处理button html，但我想将该代码用于js文件示例（var document.getElementById，如下所示）。这就是我一直在尝试的。但是代码太长了，当你在html中看到它很简单？不过无论如何，还是要谢谢你的朋友。它有点长，因为它需要在两种状态之间切换，这是你以前没有的，而且它不使用内联JS。这还假设您有多个按钮/面板，也适用于这些按钮/面板。我已经更新了HTML，向您展示了如何使用多个按钮@saidy。我一定会试试的。