написать ф-ию авторизации через Dom
Задача: при нажатии на кнопку вызвать форму (ввести логин и пароль)и на выходе получить авторизация пройдена или нет. На данный момент при запуске программы выдает - авторизация не пройдена, а уже затем только выводит саму форму, в которую, собственно, необходимо вводить пароль и логин. Помогите добить данную программу, пожалуйста.код привожу ниже:<html>
<head> <title>Домашнее задание - авторизация</title> <meta charset="utf-8"> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; } #prompt-form { display: inline-block; padding: 5px 5px 5px 70px; width: 200px; border: 1px solid black; <!-- background: white url(prompt.png) no-repeat left 5px;--> vertical-align: middle; } #prompt-form-container { position: fixed; top: 0; left: 0; z-index: 9999; display: none; width: 100%; height: 100%; text-align: center; } #prompt-form-container:before { display: inline-block; height: 100%; content: ''; vertical-align: middle; } #cover-div { position: fixed; top: 0; left: 0; z-index: 9000; width: 100%; height: 100%; background-color: gray; opacity: 0.3; filter: alpha(opacity=30); } #prompt-form input[name="login"] { display: block; margin: 5px; width: 180px; } #prompt-form input[name="pass"] { display: block; margin: 5px; width: 180px; } </style> </head> <body style="height:3000px"> <h1 align = "center">Домашнее задание - авторизация</h1> <input type="button" value="Нажмите для показа формы ввода" id="show-button"> <div id="prompt-form-container"> <form id="prompt-form"> <div id="prompt-message"></div> <input name="login" type="text"> <input name="pass" type="text"> <input type="submit" value="Ок"> <input type="button" name="cancel" value="Отмена"> </form> </div> <script> var gvalueLogin; var gvaluePass; var vlogin = 'admin'; var vpass = 'qwerty'; function validUser(logins,passw) { if (logins == vlogin && passw == vpass) { { alert('Проверка пройдена');} return "Привет" + " " + login; }else { alert('Проверка yt пройдена'); return "Я вас не знаю" } } /* Показать полупрозрачный DIV, затеняющий всю страницу (а форма будет не в нем, а рядом с ним, чтобы не полупрозрачная) */ function showCover() { var coverDiv = document.createElement('div'); coverDiv.id = 'cover-div'; document.body.appendChild(coverDiv); } function hideCover() { document.body.removeChild(document.getElementById( 'cover-div')); // удалить элемент } function showPrompt(textLogin,textPass, callback) { showCover(); var form = document.getElementById('prompt-form'); var container = document.getElementById('prompt-form-container'); document.getElementById('prompt-message').innerHTML = textLogin; document.getElementById('prompt-message').innerHTML = textPass; form.elements.login.value = ''; form.elements.pass.value = ''; function complete(value) { hideCover(); container.style.display = 'none'; document.onkeydown = null; callback(value); } form.onsubmit = function() { var valueLogin = form.elements.login.value; var valuePass = form.elements.pass.value; var gvalueLogin = form.elements.login.value; var gvaluePass = form.elements.pass.value; if (gvalueLogin == '') return false; // игнорировать пустой submit if (gvaluePass == '') return false; // игнорировать пустой submit complete(gvalueLogin); complete(gvaluePass); return false; }; form.elements.cancel.onclick = function() { complete(null); }; container.style.display = 'block'; form.elements.login.focus(); } document.getElementById('show-button').onclick = function() { if((gvalueLogin!=false)&&(gvaluePass!=false)) { showPrompt("Введите что-нибудь","Введите login", validUser(gvalueLogin,gvaluePass) );} }; </script> </body> </html> |
Часовой пояс GMT +3, время: 14:14. |