onClick函数只能在加载Web浏览器时使用，加载Web浏览器后无法完全工作

Question

When I Click the Submit button with id 'submitPasscode', I want to hide the div tag (with id 'passcodeCard') and want to display the div tag (with id 'loginCard').

After Clicking it, onClick function 'checkPasscode()' is worked, but this function works only when loading web browser. It means that div tag (with id 'passcodeCard') didn't hide, and div tag (with id 'loginCard') didn't display after loading web browser.

I would like to know what is wrong with this code to work onClick Function works well.

Here is the code:

<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

I don't completely understand your question, but is this what you wanted. I added some extra features such as making the fields required. Please let me know if this helped:

Here is the code:

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

</div>