提问者:小点点

如何使用Javascript单击按钮后显示表单?为什么这个代码不起作用?


使用CSS隐藏窗体。但是,我想在点击应用按钮后显示它。我还尝试了document.getElementById(“ApplicationForm”)。style.visibility:“visible”;,但也不工作。

null

function myFunction() {
  document.getElementById("applicationform").style.display = "block";
}
#applicationform {
  display: none;
}
<button onclick="myFunction()">Apply</button>
<div id="applicationform">
  <form>
    <input type="text" placeholder="Enter Name">
    <input type="email" placeholder="Email">
    <input type="password" placeholder="Password">
    <input type="Submit" value="SUBMIT">
  </form>
</div>

null


共1个答案

匿名用户

发生这种情况是因为按钮导致回发,

添加“返回False;”函数之后,以禁用单击按钮后的回发:

<button onclick="myFunction();return false">Apply</button>

完整代码:

null

<html>

<head>
    <style>
        #applicationform {
            display: none;
        }
    </style>
    <script>
        function myFunction() {
            document.getElementById("applicationform").style.display = "block";
        }
    </script>
</head>

<body>
    <button onclick="myFunction(); return false">Apply</button>
    <div id="applicationform">
        <form>
            <input type="text" placeholder="Enter Name">
            <input type="email" placeholder="Email">
            <input type="password" placeholder="Password">
            <input type="Submit" value="SUBMIT">
        </form>
    </div>
</body>

</html>