原生JS实现购物车添加商品功能时出现append未定义及404错误求助

错误1：Uncaught TypeError: Cannot read property 'append' of undefined #

原因 #

cartItems.append(cartRow) 执行报错是因为 cartItems 的值为 undefined，即代码运行时没有成功获取到类名为 cart-items 的DOM元素。

触发场景 #

• JS代码执行时机早于DOM渲染完成：比如script标签放在<head>标签内，或者放在页面中cart-items元素的上方，代码运行时该元素还没被浏览器渲染出来
• HTML中类名拼写错误：比如大小写不匹配、漏写字母、错写为cart-item等

解决方案 #

1. 先检查HTML代码，确认存在类名为 cart-items 的容器元素，类名拼写、大小写完全和JS代码一致
2. 将你的JS script标签移到<body>标签的最末尾，确保DOM全部渲染完成后再执行JS逻辑
3. 也可以将所有JS代码包裹在DOM加载完成的事件回调中，避免执行时机问题：

document.addEventListener('DOMContentLoaded', function() {
  // 现有所有JS代码放到这里
})

4. 可添加非空判断避免报错，方便排查问题：

var cartItems = document.getElementsByClassName("cart-items")[0]
if (!cartItems) {
  console.error('未找到购物车容器元素，请检查HTML结构')
  return
}

错误2：图片请求404，地址显示为[object%20HTMLImageElement] #

原因 #

你代码中var imageSrc = shopItem.querySelector("#BigImg") 获取到的是img DOM元素对象本身，不是图片的链接地址。当你把DOM对象直接拼入模板字符串时，会自动转为[object HTMLImageElement]字符串，导致图片请求地址错误。

解决方案 #

修改获取图片地址的代码，取img元素的src属性即可：

// 将原来的获取imageSrc的代码替换为下面的内容
var imageSrc = shopItem.querySelector("#BigImg").src

额外优化建议：HTML规范中id属性是全局唯一的，如果你页面有多个商品，不要给所有商品的图片都设置id="BigImg"，建议改为类名比如shop-item-img，然后用shopItem.querySelector(".shop-item-img").src获取地址，避免选择器永远只能匹配到第一个符合条件的元素。

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