HTML onclick 事件不适用于参数
[英]HTML onclick event doesn't work with parameter
问题描述
When I click my button, which should make things visible and invisible, the whole website disappears.
当我单击我的按钮时，它应该使事物可见和不可见，整个网站消失了。
What I was trying to do is to make a div with some text and probably some images and let it disappear and appear, when the button gets hit.我试图做的是用一些文本和可能的一些图像制作一个 div 并让它在按钮被按下时消失和出现。 So it would look like the Information box lists more information's, when the user wants to read them.因此，当用户想要阅读它们时，信息框看起来会列出更多信息。
But I would like to get a solution, witch I can use for more boxes like this one, so I can only copy the html and switch the onclick parameter and id from the div to 2, 3...但我想得到一个解决方案，我可以使用更多像这样的盒子，所以我只能复制 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>
2 个解决方案
解决方案1
2 2021-01-12 15:31:50
The problem is that you have called the function open which is getting you caught up in this problem .问题是您调用了 function open ，这让您陷入了这个问题。
Because of the (horrible, horrible) way intrinsic event attributes work you are calling document.open instead of your self-defined global open function.由于（可怕的，可怕的）内在事件属性的工作方式，您正在调用document.open而不是您自定义的全局open function。
document.open wipes out the entire document ready for document.write to write a new one. document.open清除整个文档，为document.write编写新文档做好准备。
The quick fix is to call your function something else.快速解决方法是给您的 function 打电话。
The better solution is to switch to addEventListener .更好的解决方案是切换到addEventListener 。
解决方案2
1 已采纳 2021-01-12 15:29:42
Your problem is using open - although not a reserved word - in the onclick which performs a document.open (I would have guessed window.open) and that will wipe the page in any case您的问题是在执行 document.open的 onclick 中使用open - 虽然不是保留字（我猜是 window.open）并且无论如何都会擦除页面
Rename the function but I strongly recommend you remove the inline event handler and use an eventListener重命名 function 但我强烈建议您删除内联事件处理程序并使用 eventListener
I added the IDs of the divs to show as data attribute to the buttons you click我添加了 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>
解决方案3
-2 2021-01-12 16:34:21
When I click my button, which should make things visible and invisible, the whole website disappears.当我单击我的按钮时，应该使事物可见和不可见，整个网站就会消失。
What I was trying to do is to make a div with some text and probably some images and let it disappear and appear, when the button gets hit.我试图做的是用一些文本和可能的一些图像制作一个 div，并在按钮被点击时让它消失和出现。 So it would look like the Information box lists more information's, when the user wants to read them.因此，当用户想要阅读它们时，信息框看起来会列出更多信息。
But I would like to get a solution, witch I can use for more boxes like this one, so I can only copy the html and switch the onclick parameter and id from the div to 2, 3...但我想得到一个解决方案，女巫我可以使用更多像这样的盒子，所以我只能复制 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.