Javascript onClick函数只能在加载Web浏览器时工作，并且可以'；加载Web浏览器后无法完全工作

当我单击id为“submitPasscode”的Submit按钮时，我想隐藏div标记（id为“passcodeCard”）并显示div标记（id为“loginCard”）

单击它后，onClick函数“checkPasscode（）”工作，但此函数仅在加载web浏览器时工作。这意味着加载web浏览器后，div标记（id为“passcodeCard”）没有隐藏，div标记（id为“loginCard”）也没有显示

我想知道这段代码有什么问题，以使onClick函数正常工作

代码如下：

<div id="passcodeCard" class="loginDiv" style="margin-top: 10%;" style="display: inline;">
<form id="form" class="form-horizontal" style="padding-top: 5%;">
    <div class="group">
    <input type="text" id="passcode" name="passcode" placeholder="Enter Passcode"/>
    <span class="bar"></span>
    <label>Enter Passcode</label>
    <button type="submit" class="button buttonBlue" style="margin-top: 5%;" id="submitPasscode" onclick="checkPasscode()">Submit</button>
    </div>
</form>
</div>

<div id="loginCard" class="loginDiv widgetHeight" style="display: none;">
<img class="img-responsive user-logo" src="layouts/v7/resources/Images/hims5.png">
        <div>
        <span class="{if !$ERROR}hide{/if} failureMessage" id="validationMessage">{$MESSAGE}</span>
        <span class="{if !$MAIL_STATUS}hide{/if} successMessage">{$MESSAGE}</span>
        </div>

        <div id="loginFormDiv">
        <form class="form-horizontal" method="POST" action="index.php">
            <input type="hidden" name="module" value="Users"/>
            <input type="hidden" name="action" value="Login"/>
            <div class="group">
            <input id="username" type="text" name="username" placeholder="Username" value="admin">
            <span class="bar"></span>
            <label>Username</label>
        </div>
        <div class="group">
        <input id="password" type="password" name="password" placeholder="Password" value="password">
        <span class="bar"></span>
        <label>Password</label>
        </div>
        <div class="group">
        <button type="submit" class="button buttonBlue">Sign in</button><br>
        <a class="forgotPasswordLink" style="color: #15c;">forgot password?</a>
        </div>
        </form>
        </div>
</div>
<script>
function checkPasscode(){
        if(document.getElementById("passcode").value == "passcode")
            {
                document.getElementById("form").style.display = "none";
                document.getElementById("loginCard").style.display = "";
            }
        }
</script>

输入密码
提交
{$MESSAGE}
{$MESSAGE}
用户名
密码
登录

忘记密码了？
函数checkPasscode（）{
if（document.getElementById（“密码”）.value==“密码”）
{
document.getElementById（“表单”）.style.display=“无”；
document.getElementById（“loginCard”）.style.display=“”；
}
}

我不完全理解你的问题，但这是你想要的吗。我添加了一些额外的特性，例如使字段成为必需的。请让我知道这是否有帮助：

代码如下：

输入密码
提交
{$MESSAGE}
{$MESSAGE}
用户名
密码
登录

忘记密码了？
函数checkPasscode（）{
if（document.getElementById（“密码”）.value==“密码”）
{
document.getElementById（“表单”）.innerHTML=“”；
document.getElementById（“loginCard”）.style.display=“block”；
}
}

是否希望它在页面刷新后仍保持隐藏？是的，我希望它在页面刷新后仍保持隐藏。我不确定您如何验证硬编码密码以外的密码，但在检查==密码后，您可以创建一个布尔会话变量，如：$isLogin=true；然后，如果您当前已登录，您可以签入if语句，如果未登录，则隐藏。谢谢Tommy先生，将document.getElementById（“表单”）.style.display=“none”更改为document.getElementById（“表单”）。InnerHtmlTank非常感谢您的建议，Tommy先生。