ANTICHAT - Показать сообщение отдельно

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

Создайте div какой-нибудь с соответствующим айди и будет счастье.

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

Products.js:

Код:

class
Products
{
render
(
)
{
let
htmlCatalog
=
''
;
CATALOG
.
forEach
(
(
{ id, name, price, img }
)
=>
{
htmlCatalog
+=
`
                    ${name}
                    
                    ${price}
                    Добавить в корзину
                `
;
}
)
;
const
html
=
`${htmlCatalog}`
;
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
(
)
;