购物车添加同款商品报错：Uncaught TypeError: counterElement is null

问题概述 #

开发网站购物车功能时，添加同款商品需递增对应商品数量，但触发错误：Uncaught TypeError: counterElement is null。JavaScript能识别商品初始数量，但无法找到购物车中的[data-counter]元素。

错误原因 #

核心问题在于购物车项的DOM结构设计错误：

1. 插入购物车的HTML中，data-id被放在一个独立的空<div>内，而非商品项的容器元素上
2. 查找已存在的购物车项时，itemInCart指向的是这个空<div>，而[data-counter]是它的同级元素，querySelector仅能查找当前元素的子元素，因此返回null

修复步骤 #

1. 调整购物车项HTML结构 #

将data-id移到商品项最外层的.item__block容器上，移除多余的空<div>，确保计数器元素是容器的子元素：

const cartItemHTML = `<div class="item__block" data-id="${productInfo.id}">
            <div data-counter>${productInfo.counter}</div>
        <img class="img__rubb" src="${productInfo.imgSrc}">
        <p style="margin: -73px 100px">${productInfo.title}</p>
        <p class="description__rubb" style="margin: 81px 100px">${productInfo.description}</p>
        <hr style="width: 400px; margin: -55px 15px; border-bottom: 1px solid rgba(103,103,103,0)">
        <p style="margin: 70px 15px">${productInfo.price}<span>руб.</span></p>
     </div>`;

2. 修正购物车项查找逻辑 #

修改选择器，直接匹配带data-id的.item__block容器，同时将商品项插入到购物车的专用容器.item__block__container中，优化DOM结构：

const cartWrapper = document.querySelector('#check');
const cartContainer = cartWrapper.querySelector('.item__block__container');

// ... 其他代码 ...

const itemInCart = cartContainer.querySelector(`.item__block[data-id="${productInfo.id}"]`);

完整修复后的JS代码 #

const cartWrapper = document.querySelector('#check');
const cartContainer = cartWrapper.querySelector('.item__block__container');

window.addEventListener('click', function(event) {
  if (event.target.hasAttribute('data-cart')) {
    const card = event.target.closest('.dlg-modal');
    
    const productInfo = {
      id: card.dataset.id,
      imgSrc: card.querySelector('.gui__pizzablock').getAttribute('src'),
      title: card.querySelector('.productTitle').innerText,
      price: card.querySelector('.priceTitle').innerText,
      description: card.querySelector('.gui__description').innerText,
      counter: card.querySelector('[data-counter]').innerText,
    };

    const itemInCart = cartContainer.querySelector(`.item__block[data-id="${productInfo.id}"]`);

    if (itemInCart) {
      const counterElement = itemInCart.querySelector('[data-counter]');
      counterElement.innerText = parseInt(counterElement.innerText) + 1;
    } else {
      const cartItemHTML = `<div class="item__block" data-id="${productInfo.id}">
                <div data-counter>${productInfo.counter}</div>
            <img class="img__rubb" src="${productInfo.imgSrc}">
            <p style="margin: -73px 100px">${productInfo.title}</p>
            <p class="description__rubb" style="margin: 81px 100px">${productInfo.description}</p>
            <hr style="width: 400px; margin: -55px 15px; border-bottom: 1px solid rgba(103,103,103,0)">
            <p style="margin: 70px 15px">${productInfo.price}<span>руб.</span></p>
         </div>`;
      cartContainer.insertAdjacentHTML('beforeend', cartItemHTML);
    }
  }
});

修复说明 #

• 调整data-id的位置后，itemInCart指向完整的商品项容器，querySelector('[data-counter]')能正确找到计数器子元素
• 使用.item__block__container存放商品项，避免购物车根节点元素混乱，提升DOM结构可读性

内容的提问来源于stack exchange，提问作者therepanic