Создание простой проверки пароля в HTML/Javascript, который отображает div на правильный пароль

Question

Я пытаюсь сделать код для простой проверки пароля, который будет частью веб-сайта, который я даю студентам для деятельности. Мне все равно, легко ли найти пароль в коде. Я просто хочу, чтобы учащиеся могли ввести пароль, и нажмите клавишу ввода или нажмите кнопку, чтобы узнать, правильно ли пароль.

Это 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 = "возвращение ложным;"» вместо:

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

Или просто сделать его <div вместо <form

Answer 2

Кнопка отправляет форму, перезагружая страницу.

В атрибуте onclick вашей кнопки вы должны return false переопределить поведение по умолчанию браузера фактически отправки формы:

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

Как Marvin упоминалось в комментарии вы должны исправить кавычки в onkeydown атрибут вашего ввода текста и удалить некоторые лишние пробелы:

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