JS CSS HTML Проблема с inner

[Maksimich1337]

Привет всем! Нужна помощь у тех, кто разбирается в проблемах с inner. Выдает ошибку в консоле не знаю что с этим делать
Спасибо за помощь заранее:)

 

[PaddingtonBaby]

Ошибка гласит о том, что он не находит на странице то, во что ему нужно поместить элементы (то есть отсутствует элемент с ИДЕНТИФИКАТОРОМ (ID) ROOT_PRODUCTS). Ещё важно проконтролировать, чтобы он "увидел" в ДОМ-дереве тот элемент, в который ему нужно помещать код, для этого порыскайте, как можно отложить заполнение формы до момента полной загрузки страницы (addEventListener).
Создайте div какой-нибудь с соответствующим айди и будет счастье.

Ну а пока ищете информацию о том, что сделали не так, можете использовать готовый рабочий код JS:

class Products {
    render() {
        let htmlCatalog = '';

        CATALOG.forEach(({ id, name, price, img }) => {
            htmlCatalog += `
                <li>
                    <span>${name}</span>
                    <img src="${img}" />
                    <span>${price}</span>
                    <button>Добавить в корзину</button>
                </li>
            `;
        });

        const html = `
            <ul>
                ${htmlCatalog}
            </ul>
        `;

        document.addEventListener('DOMContentLoaded', () => {
            const ROOT_PRODUCTS = document.getElementById('ROOT_PRODUCTS');
            if (ROOT_PRODUCTS) {
                ROOT_PRODUCTS.innerHTML = html;
            } else {
                console.error("Элемент с айди ROOT_PRODUCTS не существует");
            }
        });
    }
}

const productsPage = new Products();
productsPage.render();