0

Имеется проблема. У меня сам код работает хорошо и исправно, но иногда бывает так, что при заходе/открытии/перезагрузки моей страницы 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.

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

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

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

2
  • Как вы получаете элемент block, и в каком месте в коде он выполняется, сам этот блок вставляется динамически?
    – Даня
    8 янв в 19:01
  • Получил уже ответ, спасибо. Он выполняется по центру, но почти сразу же, блок появляется не динамически.
    – Andrey
    8 янв в 19:31

1 ответ 1

3

Возможно 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 дерево будет полностью построено.

1
  • Спасибо, использовал второй способ, все работает.
    – Andrey
    8 янв в 19:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.