正しいパスワードにdivを表示するHTML/Javascriptで単純なパスワードチェッカーを作成する

Question

私はアクティビティのために学生に与えるウェブサイトの一部となる単純なパスワードチェッカーのコードを作ろうとしています。コード内でパスワードが見つけやすいのであれば気にしません。生徒がパスワードを入力できるようにして、Enterキーを押すか、ボタンをクリックしてパスワードが正しいかどうかを確認します。

これはjavascriptのである：

<script type="text/javascript"> 
    function isValid(){ 
    var keyvalue = document.getElementById('keyvalue').value; 
    if (keyvalue == "miranda") 
    {document.getElementById('welcomeDiv').style.display = "block";} 
    else 
    {alert('ACCESS DENIED')} 
    } 
</script> 

ボタンをクリックすると、HTML

<form name="PasswordField" action=""> 
    Type Password Below:</br> 
    <input type="text" id="keyvalue" name="keyvalue" onkeydown = "if (event.keyCode == 13) document.getElementById('subPass).click()"> 
    <input type="button" id="subPass" value="ACCESS" onclick="isValid(this);"> 
</form> 

<div id="welcomeDiv" style="display:none;" class="answer_list"> 
    </br> 
    <p>ACCESS GRANTED</p></br> 
    <a href="google.com">Click to go to next stage.</a> 
</div> 

はうまく動作しますが、私は押した場合には、それはこのように隠れて、ページをリロードする前に隠されたdiv要素を簡単に点滅します入力してくださいもう一度div。私はそれを防ぐ方法を見つけようとしています。

Answer 1

あなたaction=""がprobabalyやっていない何をどのようなことがします。 `を使用したonSubmit = "return false;" を」の代わりに：

<form name="PasswordField" onsubmit="return false;"> 
    Type Password Below:</br> 
    <input type="text" id="keyvalue" name="keyvalue" onkeydown = "if (event.keyCode == 13) document.getElementById('subPass').click()"> 
    <input type="button" id="subPass" value="ACCESS" onclick="isValid(this);"> 
</form> 

それとも、それの代わりに` getElementByIdを<form

Answer 2

ボタンがフォームを送信して、ページを再読み込みしています。あなたが実際にフォームを送信ブラウザのデフォルトの動作をオーバーライドするreturn falseに必要なあなたのボタンのonclick属性で

：

<input type="button" id="subPass" value="ACCESS" onclick="isValid(this); return false"> 

マーヴィンは、あなたもonkeydownに引用符を修正する必要があるコメントで述べたようにテキスト入力の属性といくつかの余分なスペースを削除：

<input type="text" id="keyvalue" name="keyvalue" onkeydown="if (event.keyCode == 13) document.getElementById('subPass').click()">