Как решить ошибку Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')?

Question

[Иван]

Помогите решить ошибку Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML'). Хотел сделать корзину для интернет-магазина, но эта ошибка всё портит. Сломал себе голову и тысячу разных вариантов перепробовал. Ничего не помогает!

Вот JS код :

window.addEventListener('click', function(event) {
  if(event.target.hasAttribute('data-id')) {
    const card = event.target.closest('.card')

    const productInfo = {
      id: card.dataset.id,
      img: card.querySelector('.card-img').classList,
      name: card.querySelector('.card-title').innerText,
      desc: card.querySelector('.card-desc').innerText,
      price: card.querySelector('.card-price').innerText,
    }

    console.log (productInfo)
      
    const cartItemHTML = `
          <li class="card">
            <ul class="card-box">
              <li class="${productInfo.img}"></li>
      
              <li>
                <ul>
                  <li class="card-title">${productInfo.name}</li>
                  <li class="card-desc">
                    ${productInfo.desc}
                  </li>
                  <li>
                    <ul class="price-quantity-box">
                      <li class="quantity-box">
                        <button id="minus" class="quantity-btn" onclick="minusQuantity()">-</button>
                        <p id="quantity">1</p>
                        <button id="plus" class="quantity-btn" onclick="plusQuantity()">+</button>
                      </li>
                      <li class="price">${productInfo.price}</li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          `
    const cartWrapper =  document.getElementById('9')

    cartWrapper.insertAdjacentHTML('beforeend', cartItemHTML)
  }
})

Answer 1

[Алексей Уколов]

document.getElementById('9') возвращает null, нет на странице такого элемента. Почему его нет, по приведённому коду сказать невозможно.

Ломать себе голову тут не над чем и вариант решения только один - он легко находится по тексту ошибки.

Числовой ID - это вообще плохая идея и раньше так было нельзя.
Сейчас можно, но ломается древняя магия:

Answer 2

[Rsa97]

На момент вызова document.getElementById('9') на странице нет элемента с таким идентификатором.