时间戳

首页 > 解决方案 > 显示块隐藏/显示 onClick 仅适用于表单之外

forms - 显示块隐藏/显示 onClick 仅适用于表单之外

问题描述

我正在尝试理解并让以下隐藏/显示切换起作用。

仅当 onclick 按钮位于 <form></form> 元素之外时，隐藏/显示脚本才有效。如果我把按钮放在里面，那么 div 不会保持隐藏状态，它会被隐藏一会儿然后马上回来。谁能帮我弄清楚我做错了什么以及如何让它在表单元素中工作？

测试的浏览器：Chrome、Vivaldi、FireFox、Safari、Maxthon、Brave、Opera、Roccat

我的代码是

<head>
<title>Toggole Hide Show Button</title>
</head>
<body>
<h1>Hide Show Button</h1>
<br><br>
<br><br>
<form>
<input type="hidden" name="zz" value="abc">
<div id="toggle-div">
    Lorem Adipiscing Elit<br><br>
    Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
</div>
<button onclick="myFunction()">Hide Show</button><br>
<input type="submit" value="Save Form">
</form>
</body>
</html>
<script>
    function myFunction(){
        var x=document.getElementById("toggle-div");
        if (x.style.display === "none") {
            x.style.display= "block";
        }else{
            x.style.display = "none";
        }
    }
</script>```

标签： formsonclicktogglehideshow

解决方案

推荐阅读