JS не находит свойство у CSS

Question

Имеется проблема. У меня сам код работает хорошо и исправно, но иногда бывает так, что при заходе/открытии/перезагрузки моей страницы JavaScript не может найти/различить свойство стиля css, он думает, что это должна быть переменная и выдает ошибку. Покажу на моем примере:

HTML
        <div id="block">
           <img src="image">
        </div>

JS
      block.style.display = 'block';

CSS

#block {
    display: none;
    position: relative;
    top: 100px;
    left: 100px;
    height: 50px;
    width: 50px;
}

Я хочу присвоить стиль объекту block, а именно показать его на экране. Но иногда бывает, что js не различает, что это css объект и выдаёт ошибку: Uncaught ReferenceError: block is not defined.

После я обновляю страницу и все нормально.

Самое главное, что это происходит не всегда, а лишь иногда.

Почему так происходит?

Answer 1

Возможно DOM не успевает прогрузиться в то время как код JS уже начал работу. Как минимум код можно выполнять дождавшись прогрузки DOM с помощью события DOMContentLoaded

document.addEventListener("DOMContentLoaded", function(event) {
    // ВОТ ТУТ
});

Либо загружать скрипт для работы с атрибутом defer (если скрипт в отдельном файле)

<script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
        ^^^^

Атрибут defer сообщает браузеру, что он должен продолжать обрабатывать страницу и загружать скрипт в фоновом режиме, а затем запустить этот скрипт, когда DOM дерево будет полностью построено.

БЛОГ НА HUSL

JS не находит свойство у CSS

Ответы (1 шт):