JavaScript报错：无法读取undefined的src属性问题求助

开发者阿泽

2026-7-26

问题分析与解决

错误原因

你代码里的shopProducts变量取错了DOM层级：

点击的按钮（.addcart）的直接父元素是<strong class="project-title">，而product-image在<div class="project-card">容器里，这个容器是按钮父元素的祖父元素的父元素（按钮 → strong → project-info → project-card）。
所以在strong元素里调用getElementsByClassName("product-image")会返回空集合，取[0]自然是undefined，访问src就会抛出类型错误。

修正后的代码

JavaScript部分

function addCartClicked(event) {
    var button = event.target;
    // 改用closest找到最近的project-card容器，层级更稳定
    var shopProducts = button.closest('.project-card');
    var title = shopProducts.getElementsByClassName("product-name")[0].innerText;
    var price = shopProducts.getElementsByClassName("price")[0].innerText;
    var productImg = shopProducts.getElementsByClassName("product-image")[0].src;

    console.log(title, price, productImg);
}

补充说明

closest('.project-card')会从当前元素开始向上遍历DOM树，找到第一个匹配.project-card选择器的元素，比多次调用parentElement更可靠，后续DOM结构微调也不容易出错。
如果你的浏览器版本较旧（不支持closest），可以改用多次parentElement：
```
var shopProducts = button.parentElement.parentElement.parentElement;
```
不过优先推荐closest，代码可读性和稳定性更好。