Код из index.js не работает — кнопка не появляется на странице index.html. Ниже приведено содержимое файлов. В чём причина?
Нужны сами файлы, чтобы точно сказать. Пожалуйста, вставьте сюда содержимое index.html и index.js. Пока вы этого не сделали — самые частые причины и как их быстро проверить/исправить.
Быстрая проверка (сделайте в браузере DevTools):
- Откройте Console — есть ли ошибки (SyntaxError, ReferenceError, 404 для index.js)?
- Откройте Network — загрузился ли index.js (статус 200)?
- Включите «Disable cache» и перезагрузите (Ctrl+F5).
Типичные причины и решения
1) Неправильный путь в <script src="...">
- Убедитесь, что src указывает на правильный файл (относительный путь от HTML). Если index.js лежит в той же папке — src="index.js".
- Network покажет 404 если путь неверный.
2) Скрипт выполняется до того, как DOM готов (элемент- контейнер ещё не существует)
- Решение: либо поместить <script src="index.js"></script> перед закрывающим </body>, либо добавить defer в тег <script defer src="index.js"></script>, либо в index.js обернуть код в слушатель:
document.addEventListener('DOMContentLoaded', () => { /* ваш код */ });
3) Синтаксическая ошибка в index.js — скрипт падает и дальнейший код не выполняется
- Console покажет ошибку с указанием строки. Исправьте её.
4) Неправильный селектор/ID/опечатка
- Например document.getElementById('container') при отсутствии элемента с id="container" вернёт null и попытка appendChild вызовет ошибку. Проверьте совпадение имён.
5) CSS скрывает кнопку
- Проверьте стили (display:none; visibility:hidden; z-index; opacity). В Elements проверьте, есть ли элемент в DOM, только невидимый.
6) Использование type="module" и относительных импортов / CORS
- Если вы используете ES-модули, убедитесь, что сервер корректно отдаёт файлы (file:// и некоторые импорты могут не работать). Попробуйте type="module" и запуск через локальный сервер (например, npx http-server).
7) Кеширование
- Иногда браузер держит старую версию. Ctrl+F5 или откройте DevTools → Network → Disable cache и перезагрузите.
Минимальный корректный пример
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div id="root"></div>
<!-- либо defer либо скрипт внизу страницы -->
<script defer src="index.js"></script>
</body>
</html>
index.js:
console.log('index.js loaded');
document.addEventListener('DOMContentLoaded', () => {
const root = document.getElementById('root');
const btn = document.createElement('button');
btn.textContent = 'Нажми';
root.appendChild(btn);
});
Если после этих советов проблема остаётся — вставьте сюда полностью index.html и index.js, и я укажу точную причину.
Ваш скрипт подключается в < head> и он выполнится до того, как < body> будет сформирован (т.е. body в этот момент равен null). Вам необходимо использовать скрипт после формирования dom, это можно сделать одним из следующий способов: <br/> - Использовать атрибут <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script#defer" rel="nofollow">defer</a> ; <br/> - <a href="https://developer.mozilla.org/ru/docs/Web/API/Document/DOMContentLoaded_event" rel="nofollow">Дождаться загрузки страницы</a> ; <br/> - Подключать скрипт снизу страницы (перед закрывающим тегом body).
у тебя скрипт подключен до <code>&lt;body&gt;</code> — в этот момент <code>document.body</code> ещё null. Перенеси <code>&lt;script&gt;</code> перед <code>&lt;/body&gt;</code> или добавь <code>defer</code> .
Подключать JS вне <code><head></code> и <code><body></code> плохая практика. При рендере страницы у тебя скрипт выполняется в момент, когда браузер его увидел, то есть до того как появился <code><body></code> . <br/> Есть два варианта решения: <br/> 1. Как предложил <a href="https://qna.habr.com/user/opium" rel="nofollow">Пума Тайланд</a> , использовать <code>defer</code> , повторюсь, скрипты вне <code><head></code> и <code><body></code> плохая практика. <br/> 2. Подключить скрипт в <code><head></code> и <code><body></code> . Тут есть нюанс, у тебя скрипт написан так что он выполяется сразу как только браузер увидит код. В текущем виде твой скрипт лучше подключать в конце <code><body></code> . Если нужно в <code>head</code> , то оберни свой код в обработчик, например: <br/> <pre><code class="javascript">document.addEventListener('DOMContentLoaded', () => {
let button = document.createElement('button');
button.textContent = 'Добавить книгу';
document.body.append(button);
});</code></pre>
Все ответы правильные, типовая рекомендация, добавлять не сам код а создавать функцию, которую прописать на какое-нибудь событие окончания загрузки страницы, например: <br/> <pre><code class="html"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<script>
function main(){
let button = document.createElement('button');
button.textContent = 'Добавить книгу';
document.body.append(button);
}
</script>
<body onload="main();"></body>
</html></code></pre>