Почему возникает ошибка Cannot set property 'onchange' of null?

Question

[LevG0r]

Мне надо поменять фон на карточке, но почему-то консоль выдаёт ошибку Cannot set property 'onchange' of null в первой строке.

document.getElementById("bck_1").onchange = function() {
    let url = URL.createObjectURL(this.files[0]);
    document.getElementsByClassName("front").style.backgroundImage = "url("+ url +")";
}

Answer 1

[Александр]

Скорее всего при загрузке страницы скрипт отрабатывает быстрее, чем выстраиваемся структура документа.

Поместите ваш код в обработчик события загрузки DOM:

document.addEventListener(‘DOMContentLoded’, _ => {
    // ваш код
});

Comments

[LevG0r]

Запись точно правильная? А то у меня SyntaxError: Invalid or unexpected token.

document.addEventListener(‘DOMContentLoaded’, _ => {
    document.getElementById("bck_1").onchange = function() {
        let url = URL.createObjectURL(this.files[0]);
        document.getElementsByClassName("front").style.backgroundImage = "url("+ url +")";
    }
});

[Александр]

LevG0r, я с айфона пишу, надо одинарные кавычки заменить - перепишите их со своей клавиатуры

[Артур Карапетян]

LevG0r, кавычки в ‘DOMContentLoaded’ поменяй

[LevG0r]

Александр, Артур, поменял. Теперь TypeError: Cannot set property 'backgroundImage' of undefined
at HTMLInputElement.document.getElementById.onchange. Что делать?

[RAX7]

LevG0r, getElementsByClassName вернет HTMLCollection (типа массив элементов)

document.getElementsByClassName("front")[0].style.backgroundImage = "url("+ url +")";

[LevG0r]

RAX7, понял, спасибо большое. Он же возвращает первый элемент массива.