Задать вопрос
@Blackeyed7
Java, Android
javascript

Почему внешний скрипт JavaScript не работает?

Есть простые файлы Index.html и script.js

Когда я пишу весь код в одном index.html то все работает и тема страницы меняется:
<!DOCTYPE html>
	<head>
		<title>MDN</title>
	</head>

	<body>
		<label for="theme">Выберите тему</label>
		<select id="theme">
			<option value="white">Белая</option>
			<option value="black">Черная</option>		
		</select>
		<script>
			var select = document.querySelector('select');
			var html = document.querySelector('html');
			document.body.style.padding = '10px';

			function update(bgColor, textColor) {
			  html.style.backgroundColor = bgColor;
			  html.style.color = textColor;
			}

			select.onchange = function() {
			  ( select.value === 'black' ) ? update('black','white') : update('white','black');
			}
		</script>
		<h1>My Site</h1>
	</body>

</html>


Но когда отделяю в отдельные файлы то не работает:
index.html
<!DOCTYPE html>
	<head>
		<title>MDN</title>
                <script src="script.js"></script>
 	</head>

	<body>
		<label for="theme">Выберите тему</label>
		<select id="theme">
			<option value="white">Белая</option>
			<option value="black">Черная</option>		
		</select>
		<h1>My Site</h1>
	</body>

</html>


script.js
var select = document.querySelector('select');
var html = document.querySelector('html');
document.body.style.padding = '10px';

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

select.onchange = function() {
  ( select.value === 'black' ) ? update('black','white') : update('white','black');
}
  • Вопрос задан
  • 3042 просмотра
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 4
dollar
@dollar
Делай добро и бросай его в воду.
Потому что нужно разместить скрипт в конце файла, когда все элементы будут засчитаны:
.....
    <script src="script.js"></script>
  </body>
</html>

Либо в скрипте использовать событие DOMContentLoaded, которое срабатывает в конце загрузки документа:
Код
var select, html;

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

window.addEventListener('DOMContentLoaded', e=>{
  select = document.querySelector('select');
  html = document.querySelector('html');
  document.body.style.padding = '10px';

  select.onchange = function() {
    ( select.value === 'black' ) ? update('black','white') : update('white','black');
  }
});
Ответ написан
Комментировать
Комментировать
hzzzzl
@hzzzzl
потому что head грузится раньше чем body, и этих элементов еще нет на странице,
положи скрипт перед < /body >
Ответ написан
Комментировать
Комментировать
mnml-by
@mnml-by
Молодой и талантливый
Желательно подключать скрипты перед </body>, но если очень хочется подключать в head, то сделай это так
<script src="script.js" defer></script>
Ответ написан
1 комментарий
1 комментарий
SophieRoy
@SophieRoy
Head of Artificial Intelligence and IoT Department
The problem is that you must be including your js file in a head tag or somewhere above your main content. By doing this, you are executing your js code before full html content has been attached. As a result, when your js code executes, it does not recognize any html element because there isn’t any. Try including them at the end of your html content or use onload functionality.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработать 3д модель в компас
31 дек. 2024, в 09:25
1000 руб./за проект
Загрузка контента третьего сайта на своем домене, модификация realtime
31 дек. 2024, в 03:58
50000 руб./за проект
Телеграм ботт и chat Gpt
30 дек. 2024, в 23:57
20000 руб./за проект
Ещё заказы