onClick機能はWebブラウザの読み込み時のみ動作し、Webブラウザを読み込んだ後は完全には動作しません

Question

idが 'submitPasscode'のSubmitボタンをクリックするとdivタグ（idが 'passcodeCard'） divタグ（IDは 'loginCard'）を表示します。

クリック後、 'checkPasscode（）'が機能しますが、この機能はウェブブラウザを読み込んでいるときにのみ機能します。これは、divタグ（id 'passcodeCard'）が非表示にならず、Webブラウザをロードした後に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> 

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>