Javascript HTML onclick事件不'；不能使用参数

当我点击我的按钮时，整个网站就消失了。我的按钮应该可以让事情变得可见和不可见

我想做的是用一些文本和一些图像制作一个div，当按下按钮时，让它消失和出现。因此，当用户想要阅读信息时，信息框会列出更多信息

但是我想得到一个解决方案，我可以用它来处理更多像这样的框，所以我只能复制html并将onclick参数和id从div切换到2，3

功能打开（x）{
var more\u info=document.getElementById（“项目信息”+x）；
if（more_info.style.display==“无”）{
更多信息。style.display=“取消设置”；
}否则{
更多信息。style.display=“无”；
}
}

.project框{
填充：2vh；
边缘底部：3vh；
盒影：0px5px7pxRGB（136136136）；
}
.项目按钮{
宽度：20vw；
高度：3vh；
背景色：#D6；
边界：无；
}
.项目按钮：悬停{
背景色：#B50000；
颜色：白色；
}
.项目按钮：焦点，
.项目按钮：活动，
.项目按钮：已访问{
边界：无；
边界半径：0；
}
.项目已结束{
显示：无；
}
* {
字体系列：Arial、Helvetica、无衬线字体；
字号：2vh；
}

项目1
描述

信息

更多细节

您的问题是在onclick中使用了

open

-（我猜是window.open），在任何情况下都会擦除页面

重命名该函数，但我强烈建议您删除内联事件处理程序并使用eventListener

我将div的id添加到您单击的按钮中，以显示为数据属性

document.addEventListener（“单击”），函数（e）{
常数tgt=e.target；
if（tgt.classList.contains（“项目按钮”））{
const more_info=document.getElementById（tgt.dataset.id）；
更多信息.classList.toggle（“项目关闭”）；
}
})

.project框{
填充：2vh；
边缘底部：3vh；
盒影：0px5px7pxRGB（136136136）；
}
.项目按钮{
宽度：20vw；
高度：3vh；
背景色：#D6；
边界：无；
}
.项目按钮：悬停{
背景色：#B50000；
颜色：白色；
}
.项目按钮：焦点，
.项目按钮：活动，
.项目按钮：已访问{
边界：无；
边界半径：0；
}
.项目已结束{
显示：无；
}
* {
字体系列：Arial、Helvetica、无衬线字体；
字号：2vh；
}

项目1
描述

信息

更多细节
项目2
描述

信息

更多细节

问题是您调用了函数

open

，这让您陷入了困境

由于内部事件属性的工作方式（可怕、可怕），您正在调用

document.open

而不是自定义的全局

open

函数

document.open

清除整个文档，准备

document.write

编写新文档

快速修复方法是调用其他函数

---

更好的解决方案是切换到

addEventListener

open（）是一个内置函数。因此，您不能使用名称来重命名函数，例如pageopen（）以获得确切的功能。

最好自己尝试调试。打开JS控制台，首先尝试查看

console.log（document.querySelectorAll（'#project_info_1'））返回的元素console.log

语句，并通过inspector查看css。我们不知道你的网站的整体结构，例如，如果页面上有其他具有该id的元素。@wawawa-这不会有帮助，因为OP的代码行甚至没有被调用。@Paul-按钮不在

project\u info\u 1

Hmm内，有趣的是，我可以发誓

open

将是window.open，正如我说的，onclick的工作方式真的很糟糕。它在DOM中搜索匹配项，因此它会点击

文档。在尝试
窗口之前打开
。打开
。根据经验，如果你的答案没有说以前的答案没有说的话，你就不必麻烦发布了。@Quentin这个解释正确吗？不，不正确。