シンプルなJS + HTMLスクリプトは私

Question

のために正常に動作していない私は、次のコードを持っている：私はこのコードを試してみてください、これまで、もちろん、私は2つの「プロンプトの中でデータを送信すると

<div style="text-align: center;margin: auto;display: block;padding: 20px;width: 200px;"> 
     <button onclick="usernamePrompt()">Click to enter the username</button> 
     <button onclick="passwordPrompt()">Click to enter the password</button> 
     <button onclick="verify()">Verify here</button> 
    </div> 
    <div style="text-align: center;margin: auto;display: block;padding: 20px;"> 
     <p style="text-align: center;font-size: 20px;" id="verifyPara"></p> 
    </div> 
    <script type="text/javascript"> 
     function usernamePrompt() { 
      window.username = prompt('Enter username:'); 
     }; 
     function passwordPrompt() { 
      window.password = prompt('Enter password:'); 
     }; 
     function verify (username,password) { 
      if (username === "immoral" && password ==="koala") { 
       document.getElementById('verifyPara').innerHTML='Success!'; 
      } else { 
       document.getElementById('verifyPara').innerHTML='Fail!'; 
       delete username; 
       delete password; 
      }; 
     } 
    </script> 

を。私はこのデータをif-elseステートメントで使用し、提出されたユーザー名とパスワードが必要なものであれば 'Success'を生成し、そうでなければ 'Fail'を生成します。
問題は「成功」を生成することはなく、常に「失敗」です。コードの何が間違っていますか？助けてください。ありがとう

Answer 1

変数をグローバルに宣言しているので、変数を確認するだけで済みます。

function verify() { 
    if (window.username === "immoral" && window.password === "koala") { 
     document.getElementById('verifyPara').innerHTML = 'Success!'; 
    } else { 
     document.getElementById('verifyPara').innerHTML = 'Fail!'; 
     delete username; 
     delete password; 
    }; 
} 

https://jsfiddle.net/0s2fL79r/1/

Answer 2

私はあなたがユーザ名の2つの隠しfields-- 1を設定し、他のことができますあなたのソリューションのために、あなたはjavascriptのprompt.Wellとテキストフィールドとしてパスワードを取ることができないことを言う必要がまず最初にパスワード用。プロンプトの後に値を設定します。比較するときは、隠れた値と比較してください。 もう一度私はこれが現実の生活ではないと言った。 JavaScriptがどのように機能するかを理解するためにそれを見ることができます。
は、以下のコードを参照してください。

<div style="text-align: center;margin: auto;display: block;padding: 20px;width: 200px;"> 
     <button onclick="usernamePrompt()">Click to enter the username</button> 
     <button onclick="passwordPrompt()">Click to enter the password</button> 
     <button onclick="verify()">Verify here</button> 
    </div> 
    <div style="text-align: center;margin: auto;display: block;padding: 20px;"> 
     <p style="text-align: center;font-size: 20px;" id="verifyPara"></p> 
    </div> 
    <input type="hidden" id="userName"/> 
    <input type="hidden" id="password"/> 
    <script type="text/javascript"> 

     function usernamePrompt() { 
      var username = prompt('Enter username:'); 
      document.getElementById('userName').value= username; 
     }; 
     function passwordPrompt() { 
      var password = prompt('Enter password:'); 
      document.getElementById('password').value = password; 
     }; 
     function verify () { 
      if (document.getElementById('userName').value == "immoral" && document.getElementById('password').value =="koala") { 
       document.getElementById('verifyPara').innerHTML='Success!'; 
      } else { 
       document.getElementById('verifyPara').innerHTML='Fail!'; 


      }; 
     } 
    </script> 

Answer 3

あなたのエラーの背後にある理由は、あなたのverify関数にパラメータを渡すていなかった、ということです。パラメータを渡すだけで動作します。あなたは、常に「失敗」を持っている理由

function usernamePrompt() { 
 
      window.username = prompt('Enter username:'); 
 
     }; 
 
     function passwordPrompt() { 
 
      window.password = prompt('Enter password:'); 
 
     }; 
 
     function verify (username,password) { 
 
      if (username === "immoral" && password ==="koala") { 
 
       document.getElementById('verifyPara').innerHTML='Success!'; 
 
      } else { 
 
       document.getElementById('verifyPara').innerHTML='Fail!'; 
 
       delete username; 
 
       delete password; 
 
      }; 
 
     }

<div style="text-align: center;margin: auto;display: block;padding: 20px;width: 200px;"> 
 
     <button onclick="usernamePrompt()">Click to enter the username</button> 
 
     <button onclick="passwordPrompt()">Click to enter the password</button> 
 
     <button onclick="verify(window.username, window.password)">Verify here</button> 
 
    </div> 
 
    <div style="text-align: center;margin: auto;display: block;padding: 20px;"> 
 
     <p style="text-align: center;font-size: 20px;" id="verifyPara"></p> 
 
    </div>

Answer 4

理由は（グローバル変数とそれらを混在させないで、あなたのverify(username, password)関数に変数usernameとpasswordを渡している、これらの変数は、機能を確認するために現地であるということです）... javascriptでは、同じ名前のローカル変数とグローバル変数がある場合、ローカル変数はグローバル変数を隠します...同じことがコードで行われます。内部変数のローカル変数にアクセスしています。名前）.. あなたは引数からそれらを削除し、グローバル変数との比較...変数をグローバルスコープに格納してこのように使用するのは良いアプローチではありませんが、問題解決のためには解決策があります。

<script type="text/javascript"> 
    function usernamePrompt() { 
     window.username = prompt('Enter username:'); 
    }; 
    function passwordPrompt() { 
     window.password = prompt('Enter password:'); 
    }; 
    function verify() { 
     if (window.username === "immoral" && window.password ==="koala") { 
      document.getElementById('verifyPara').innerHTML='Success!'; 
     } else { 
      document.getElementById('verifyPara').innerHTML='Fail!'; 
      delete window.username; 
      delete window.password; 
     }; 
    } 
</script>