Почему в браузере ошибка, а в песочнице работает?

Question

[Ingernirated]

Доброй ночи, такая проблема, почему-то js стал выводит ошибку

tts.html:24 Uncaught TypeError: Cannot set property 'backgroundColor' of undefined
    at tts.html:24

Очистка кэша браузера не помогает
https://jsfiddle.net/4s7ybtem/
В песочнице всё отлично.

Answer 1

[Алексей Петров]

Оберните код скрипта:

<script>
window.onload = function() {
  var top = document.querySelector(".top");
  top.style.backgroundColor = "red";
  top.style.width = "500px";
  top.style.height = "600px";
}
</script>

Comments

[Ingernirated]

спасибо, а почему именно так?
раньше, вроде, и без этого работало, было достаточно прописать без функции значения.

[Алексей Петров]

Событие onload на window срабатывает, когда загружается вся страница, включая ресурсы на ней – стили, картинки, iframe и т.д.

[Алексей Петров]

Ingernirated: если подключите jQuery, то можно написать и так:

$( document ).ready(function() {
   var top = document.querySelector(".top");
   top.style.backgroundColor = "green";
   top.style.width = "500px";
   top.style.height = "600px";
})