Задать вопрос
@aLeXxX_03
javascript

Почему не работает код из js файла?

Не работает код из index.js, почему?
<!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 src="index.js"></script>
  <body></body>
</html>


файл index.js, его содержимое:
let button = document.createElement('button');
button.textContent = 'Добавить книгу';
document.body.append(button);


Кнопка не отображается на странице index.html. В чем причина?
  • Вопрос задан
  • 691 просмотр
1 комментарий
Подписаться 3 Простой 1 комментарий
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Академия Эдюсон
    Fullstack-разработчик на JavaScript + ИИ
    11 месяцев
    Далее
  • ProductStar × РБК
    Профессия: Инженер по тестированию
    6 месяцев
    Далее
Решения вопроса 1
Mike_Ro
@Mike_Ro Куратор тега JavaScript
Python, JS, WordPress, SEO, Bots, Adversting
Ваш скрипт подключается в < head> и он выполнится до того, как < body> будет сформирован (т.е. body в этот момент равен null). Вам необходимо использовать скрипт после формирования dom, это можно сделать одним из следующий способов:
- Использовать атрибут defer;
- Дождаться загрузки страницы;
- Подключать скрипт снизу страницы (перед закрывающим тегом body).
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 3
opium
@opium
Просто люблю качественно работать
у тебя скрипт подключен до &lt;body&gt; — в этот момент document.body ещё null. Перенеси &lt;script&gt; перед &lt;/body&gt; или добавь defer.
Ответ написан
Комментировать
Комментировать
irishmann
@irishmann
Научись пользоваться дебаггером
Подключать JS вне <head> и <body> плохая практика. При рендере страницы у тебя скрипт выполняется в момент, когда браузер его увидел, то есть до того как появился <body>.
Есть два варианта решения:
1. Как предложил Пума Тайланд, использовать defer, повторюсь, скрипты вне <head> и <body> плохая практика.
2. Подключить скрипт в <head> и <body>. Тут есть нюанс, у тебя скрипт написан так что он выполяется сразу как только браузер увидит код. В текущем виде твой скрипт лучше подключать в конце <body>. Если нужно в head, то оберни свой код в обработчик, например:
document.addEventListener('DOMContentLoaded', () => {
  let button = document.createElement('button');
  button.textContent = 'Добавить книгу';
  document.body.append(button);
});
Ответ написан
Комментировать
Комментировать
@rPman
Все ответы правильные, типовая рекомендация, добавлять не сам код а создавать функцию, которую прописать на какое-нибудь событие окончания загрузки страницы, например:
<!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>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack JavaScript разработчик
MakeDifference
от 70 000 до 100 000 ₽
Frontend-разработчик (vanilla JS, high-load)
Karma8
от 200 000 ₽
Developer / Right Hand to CTO
ApolloRise Tech
от 2 500 до 3 500 $
Ещё вакансии