Prompt и условный оператор
Здравия желаю! У меня появилась проблема. Я создал переменную pass, значение которой равно тексту, введённому в prompt. Далее добавил условный оператор. Если переменная pass равняется определённому значению, то блок admin_block должен принять свойство display, значение которого block. В противном случае, user_block должен принять свойство display со значением block.
После ввода любого значения в prompt оба элемента принимают свойство display со значением block. В консоли появляется ошибка: "Uncaught TypeError: Cannot read property 'style' of null".
<html>
<head>
<title>GGBA</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script>
var pass = prompt('What is your name?');
if (pass == 'Admin') {
document.getElementById('admin_block').style.display = 'block';
document.getElementById('user_block').style.display = 'none';
}
else if (pass != 'Admin') {
document.getElementById('admin_block').style.display = 'none';
document.getElementById('user_block').style.display = 'block';
}
</script>
</head>
<body>
<center>
<div id="admin_block">
<span>GT: </span><a href="">CLICK</a>
</div>
<div id="user_block">
<span class="fun">Hello!</span>
</div>
</center>
</body>
</html>
P.S.: Я только начинаю изучать JavaScript и это моё первое обращение на форуме. Если я что-то неправильно указал, задал вопрос неправильно и т.д., то укажите на ошибки, пожалуйста. Заранее, благодарен!) |
Цитата:
Вот он встретил <script> и тут же начинает выполнять то, что там написано. Вот он встретил document.getElementById('admin_block'). А ему еще не встречался элемент с id = admin_block Поэтому надо ставить все скрипты, которые обращаются к элементам, после этих элементов. Например в конец <body>
<html>
<head>
<title>GGBA</title>
<!-- <link rel="stylesheet" href="css/style.css" type="text/css" /> -->
</head>
<body>
<center>
<div id="admin_block">
<span>GT: </span><a href="">CLICK</a>
</div>
<div id="user_block">
<span class="fun">Hello!</span>
</div>
</center>
<script>
var pass = prompt('What is your name?');
if (pass == 'Admin') {
document.getElementById('admin_block').style.display = 'block';
document.getElementById('user_block').style.display = 'none';
}
else if (pass != 'Admin') {
document.getElementById('admin_block').style.display = 'none';
document.getElementById('user_block').style.display = 'block';
}
</script>
</body>
</html>
Но в этом случае, хоть документ и разобран, но функция promt вызывается раньше, чем он успел показаться на экране. Или указывать, что что то должно исполняться, после события окончания загрузки документа, когда весь HTML будет разобран и страница создана
<html>
<head>
<title>GGBA</title>
<!-- <link rel="stylesheet" href="css/style.css" type="text/css" /> -->
<script>
window.addEventListener ('load', () => {
var pass = prompt('What is your name?');
if (pass == 'Admin') {
document.getElementById('admin_block').style.display = 'block';
document.getElementById('user_block').style.display = 'none';
}
else if (pass != 'Admin') {
document.getElementById('admin_block').style.display = 'none';
document.getElementById('user_block').style.display = 'block';
}
})
</script>
</head>
<body>
<center>
<div id="admin_block">
<span>GT: </span><a href="">CLICK</a>
</div>
<div id="user_block">
<span class="fun">Hello!</span>
</div>
</center>
</body>
</html>
|
Спасибо за наводку)
|
| Часовой пояс GMT +3, время: 19:15. |