javascript - onClick 函数只能在浏览器加载时起作用，浏览器加载后就不能完全起作用了

Question

当我单击 ID 为“submitPasscode”的提交按钮时，我想隐藏 div 标签(ID 为“passcodeCard”)并显示 div 标签(ID 为“loginCard”)。

点击后，onClick 函数 'checkPasscode()' 起作用，但该函数仅在加载网络浏览器时起作用。这意味着div标签(id为'passcodeCard')没有隐藏，div标签(id为'loginCard')在加载网络浏览器后没有显示。

我想知道这段代码有什么问题才能在点击功能上运行良好。

代码如下:

<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>

Answer 1

我不完全理解你的问题，但这就是你想要的。我添加了一些额外的功能，例如制作必填字段。如果这有帮助，请告诉我:

代码如下:

<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="password" id="passcode" name="passcode" placeholder="Enter Passcode" required/>
    <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" required>
            <span class="bar"></span>
            <label>Username</label>
        </div>
        <div class="group">
        <input id="password" type="password" name="password" placeholder="Password" value="password" required>
        <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").innerHTML = "";
                document.getElementById("loginCard").style.display = "block";
            }
        }
</script>