代码报错Cannot read properties of undefined (reading 'innerText')求助

错误根源 #

1. 方法名拼写错误：代码里用了getElementsByClass，但正确的DOM方法名是getElementsByClassName——少了末尾的Name，导致调用不存在的方法返回undefined，后续访问[0].innerText自然报错。
2. DOM层级定位错误：点击的按钮<i class="add-cart">父元素是<p>，但<h4 class="product-title">是<p>的同级元素，不是<p>的子元素。就算方法名对了，在<p>里找product-title也找不到，还是会返回undefined。

修复后的代码 #

JavaScript代码 #

var addCart = document.getElementsByClassName("add-cart");

for (var i = 0; i < addCart.length; i++) {
  var button = addCart[i];
  button.addEventListener("click", addCartClicked);
}

function addCartClicked(event) {
  var button = event.target;
  // 定位到包含整个商品的外层容器div
  var shopProducts = button.closest('div');
  // 使用正确的方法名获取元素
  var title = shopProducts.getElementsByClassName("product-title")[0].innerText;
  console.log(title);
}

关键修正点 #

• 把getElementsByClass改为getElementsByClassName，修正方法名拼写错误。
• 用closest('div')定位到商品的最外层容器，这样就能在这个容器范围内找到同级的product-title元素，而不是局限在按钮的父元素<p>里查找。

更简洁的可选写法 #

用querySelector替代getElementsByClassName，代码更精简：

var addCart = document.getElementsByClassName("add-cart");

for (var i = 0; i < addCart.length; i++) {
  var button = addCart[i];
  button.addEventListener("click", addCartClicked);
}

function addCartClicked(event) {
  var shopProducts = event.target.closest('div');
  var title = shopProducts.querySelector(".product-title").innerText;
  console.log(title);
}

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