HTML onclick 事件不适用于参数

Question

当我点击我的按钮时，整个网站都消失了。

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

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

function open(x) {
var more_info = document.getElementById("project_info_" + x);
if (more_info.style.display == "none") {
more_info.style.display = "unset";
} else {
more_info.style.display = "none";
}
}

.project-box {
padding: 2vh;
margin-bottom: 3vh;
box-shadow: 0px 5px 7px rgb(136, 136, 136);
}
.project-button {
width: 20vw;
height: 3vh;
background-color: #d6d6d6;
border: none;
}
.project-button:hover {
background-color: #B50000;
color: white;
}
.project-button:focus,
.project-button:active,
.project-button:visited {
border: none;
border-radius: 0;
}
.project-closed {
display: none;
}
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 2vh;
}

<div class="project-box" id="project_1">
<h3>Project 1</h3>
<p>description</p>
<div class="project-closed" id="project_info_1">
<p>Informations</p>
</div>
<button class="project-button" onclick="open(1)">More details</button>
</div>

Answer 1

问题是您调用了函数open，这让您陷入了这个问题。

由于内部事件属性的工作方式(可怕、可怕(，您正在调用document.open，而不是自定义的全局open函数。

document.open擦除整个文档，为document.write写入新文档做好准备。

快速解决方法是调用其他函数。

更好的解决方案是切换到addEventListener。

Answer 2

您的问题是在执行document.open(我猜是window.open(的onclick中使用open，尽管它不是保留字，但在任何情况下都会擦除页面

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

我添加了div的ID作为数据属性显示在您单击的按钮上

document.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("project-button")) {
const more_info = document.getElementById(tgt.dataset.id);
more_info.classList.toggle("project-closed");
}
})

.project-box {
padding: 2vh;
margin-bottom: 3vh;
box-shadow: 0px 5px 7px rgb(136, 136, 136);
}
.project-button {
width: 20vw;
height: 3vh;
background-color: #d6d6d6;
border: none;
}
.project-button:hover {
background-color: #B50000;
color: white;
}
.project-button:focus,
.project-button:active,
.project-button:visited {
border: none;
border-radius: 0;
}
.project-closed {
display: none;
}
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 2vh;
}

<div class="project-box" id="project_1">
<h3>Project 1</h3>
<p>description</p>
<div class="project-closed" id="project_info_1">
<p>Informations</p>
</div>
<button type="button" class="project-button" data-id="project_info_1">More details</button>
</div>
<div class="project-box" id="project_2">
<h3>Project 2</h3>
<p>description</p>
<div class="project-closed" id="project_info_2">
<p>Informations</p>
</div>
<button type="button" class="project-button" data-id="project_info_2">More details</button>
</div>