Проверка по логину/паролю и вывод сообщения

Question

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

$(document).ready(() => {
    var form = document.form;
    form.addEventListener("submit", login);
});

function login(event) {
    event.preventDefault();
    var login = form.login.toString();
    if (login == "i") {
        form.lol.hidden = false;
    }
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
</head>
<body bgcolor="black" text="#FFFFFF" align="center">
    <p style="font-family: Source Sans Pro; font-style: normal; font-weight: bold; font-size: 72px;">
        <u>Authorization:</u>
    </p>
    <div style="margin:0;">
        <div class="Container" style="font-family: Source Sans Pro; font-size: 48px;">
            <form name="form" action="" method="">
                <p>login:
                    <input name="login" autocomplete="off" id="login" type="text"
                        style="width:400px; height:25px; background:#000000; border: 2px solid #FFFFFF; color:#FFFFFF;">
                </p>
                <p>password:
                    <input name="password" type="password"
                        style="width:400px; height:25px; background:#000000; border: 2px solid #FFFFFF; color:#FFFFFF;">
                </p>
            </form>
        </div>
    </div>
    <input type="submit" value="Отправить"
        style="cursor:pointer; margin-top:10px; width:200px; height:35px; font:24px; background:#000000; border: 2px solid #FFFFFF; color:#FFFFFF;">
    <div name="lol" hidden="true" color="red">Привет</div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

Answer 1

<!DOCTYPE html>
<html lang="ru">
  <head>
<meta charset="utf-8">
  </head>
  <body bgcolor="black" text="#FFFFFF" align="center">
    <p style="font-family: Source Sans Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 72px;"><u>Authorization:</u></p>
    <div class="Container" style="font-family: Source Sans Pro;
    font-size: 48px;">
    <form name "form" action="" method="">
    <p>login:
    <input name="login" autocomplete="off" id="login" type="text" style="width:400px; height:25px; background:#000000; border: 2px solid #FFFFFF; color:#FFFFFF" value="">
    </p><p>password:
    <input name="password" type="password" style="width:400px; height:25px; background:#000000; border: 2px solid #FFFFFF; color:#FFFFFF" value="">
    </p></div></div></table>
    <input type="submit" value="Отправить" style="cursor:pointer; margin-top:10px; width:200px; height:35px; font:24px; background:#000000; border: 2px solid #FFFFFF; color:#FFFFFF">
    <p id="pls" hidden="true" style="color: red">Введены некорректные данные. Пожалуйста проверьте их правильность.</p>
    <div id="help" hidden="true" style="color: red">
    <p>Ошибка!</p>
    <p>Код ошибки: NTPCesar538</p>
    </div>
    </form>
  </body>

  <script>
    var form = document.forms[0];
    form.addEventListener('submit', login);
    function login(event) {
    event.preventDefault();
    var login = form.login;  
    if (login.value=="Cesar5"&&form.password.value=="Hjxfw10"){
    document.getElementById('pls').hidden=true;
    document.getElementById('help').hidden=false;
    }
    else { document.getElementById('pls').hidden=false;
    document.getElementById('help').hidden=true;}
    }
  </script>

БЛОГ НА HUSL

Проверка по логину/паролю и вывод сообщения

Ответы (1 шт):