|
Сообщение от SomeUserGG
|
|
Я только начинаю изучать JavaScript
|
Раз только начинаете изучать, то уясните главное. Браузер обрабатывает текс HTML последовательно. От начала до конца.
Вот он встретил <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>