Подскажите что делаю не так

Question

Подскажите что делаю не так

ALEX Профи (868), закрыт 4 года назад

CSS
.square{
background-color: green;
}

JS
var change = document.getElementById("change");
change.style.backgroundColor = "red";

ошибка

script.js:2 Uncaught TypeError: Cannot read property 'style' of null

Answer 1

< script src="script.js" defer >< /script >

Можно попробовать так.
defer будет выполнять скрипт уже после загрузки страницы.

Браузер "читает" страницу сверху вниз, и когда срабатывает скрипт, id="change" еще не загружен.

Или... можно записать такую функцию:

window.addEventListener('DOMContentLoaded', function(){
а здесь уже писать код...
});

Answer 2

У тебя нет элемента с id='change', поэтому document.getElementById("change") возвращает null.
А null не имеет свойства style, поэтому ты ловишь ошибку.

Answer 3

document.getElementById("change"); выполняется сразу при загрузке в то время как <div class="..." id="change"> еще не доступен.