JavaScript购物车加减按钮失效与innerHTML空值报错排查

问题定位 #

你遇到的两个异常都是代码逻辑/编写顺序问题，没有复杂的兼容问题：

1. Uncaught TypeError: cannot set property 'innerHTML' of null 报错原因有两个：
   • 代码中使用了cartItemsEl变量存储购物车容器DOM，但你没有写获取这个DOM的代码
   • 如果JS代码写在HTML的<head>标签里，运行时页面元素还没渲染完成，获取DOM会返回null
2. +/-按钮点击无响应、无法重复添加同一件商品的原因：
   • changeNumberOfUnits函数里加号的判断条件写反了：你写的是action === "plus" && numberOfUnits < 1，但商品加入购物车的初始数量最少是1，这个条件永远不可能成立，点加号时数量不会有任何变化
   • 加入购物车的逻辑没有做重复商品判断，重复点击同一件商品会往购物车数组里重复push相同商品，而不是增加已有商品的数量

修复步骤 #

1. 调整JS代码位置：把所有JS代码移到页面HTML结构的末尾，也就是</body>闭合标签之前，保证DOM全部加载完成后再运行JS。
2. 补全DOM获取代码：在JS开头获取所有需要操作的页面元素：

   const cartItemsEl = document.querySelector('.cart-items');
   const subtotalEl = document.querySelector('.subtotal');
   // 初始化购物车数组
   let cart = [];
   

3. 修正数量修改的判断逻辑：把changeNumberOfUnits里加号的错误判断条件改掉，去掉永远不成立的numberOfUnits < 1限制：

   function changeNumberOfUnits(action, id) {
     cart = cart.map((item) => {
       let numberOfUnits = item.numberOfUnits;
       if (item.id === id) {
         if (action === "minus" && numberOfUnits > 1) {
           numberOfUnits--;
         } else if (action === "plus") {
           // 如需限制最大购买数量，可在这里加判断，比如 && numberOfUnits < 10
           numberOfUnits++;
         }
       }
       return {
         ...item,
         numberOfUnits,
       };
     });
     updateCart();
   }
   

4. 补全缺失的updateCart方法：每次购物车数据变化后，重新渲染列表、计算总金额和总商品数：

   function updateCart() {
     renderCartItems();
     let totalUnits = 0;
     let totalPrice = 0;
     cart.forEach(item => {
       totalUnits += item.numberOfUnits;
       totalPrice += item.price * item.numberOfUnits;
     });
     subtotalEl.innerHTML = `Totalt (${totalUnits} varor): ${totalPrice}`;
   }
   

5. 修复重复加购逻辑：写加入购物车方法时，先判断商品是否已经在购物车中，存在就直接加数量，不存在再新增条目：

   function addToCart(productId) {
     const existItem = cart.find(item => item.id === productId);
     if (existItem) {
       changeNumberOfUnits('plus', productId);
       return;
     }
     const targetProduct = products.find(p => p.id === productId);
     cart.push({
       ...targetProduct,
       numberOfUnits: 1
     });
     updateCart();
   }
   
   // 补全删除商品方法
   function removeItemFromCart(productId) {
     cart = cart.filter(item => item.id !== productId);
     updateCart();
   }
   

验证点 #

修复完成后可以按以下顺序测试：

• 页面加载时控制台不再报null相关错误
• 点击商品的加购按钮，商品正常出现在购物车中
• 重复点击同一件商品的加购按钮，不会新增重复条目，对应商品数量自动+1
• 点击购物车内的+/-按钮，商品数量正常增减，底部总金额、总商品数同步更新
• 点击商品信息区域可以正常从购物车移除对应商品

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