Куда вставлять <script> — в <head> или в конце <body>? Мой код не находит кнопку
Я только начал и сделал кнопку, а скрипт положил в <head>:
<head>
<script>
document.getElementById('btn').onclick = function() { alert('привет'); };
</script>
</head>
<body>
<button id="btn">Жми</button>
</body>
Кнопка ничего не делает, в консоли что-то про null. Куда правильно класть скрипт?
2 ответа
Браузер читает HTML сверху вниз. Когда скрипт стоит в <head>, кнопки btn ещё не существует — getElementById возвращает null, и попытка повесить на него onclick падает.
Самый простой фикс — перенести <script> в самый конец, перед закрывающим </body>:
<body>
<button id="btn">Жми</button>
<script>
document.getElementById('btn').onclick = function() { alert('привет'); };
</script>
</body>
Теперь к моменту запуска скрипта кнопка уже есть в DOM, и всё работает.
Если очень хочется держать скрипт в <head> (или подключать внешним файлом <script src="app.js"></script>), добавь к тегу атрибут defer:
<head>
<script src="app.js" defer></script>
</head>
defer говорит браузеру: «скачай скрипт, но выполни только после того, как разберёшь всю страницу». Тогда элементы уже будут на месте. Для новичка defer — самый удобный вариант.