点击咖啡卡片更新订单摘要时的DOM事件监听器错误排查

看起来你遇到的问题是个典型的循环索引不匹配导致的DOM元素访问错误，我来帮你拆解一下问题所在，然后给你修复方案。

问题根源分析 #

你给所有15个.product__plan卡片都绑定了点击事件，在事件处理函数里，你用循环的索引i去访问brewedTypes、coffeeTypes这些元素集合，但这些集合每个都只有3个元素（比如brewedTypes对应第一组的3个咖啡冲泡方式标题）。

当你点击第4个及以后的卡片时，i的值会是3到14，这时候brewedTypes[i]就会是undefined，尝试访问undefined.innerText自然会抛出TypeError。而前3个卡片看似正常，其实也存在逻辑错误——比如点击第一个卡片时，你会错误地把第二组的第一个标题（Single Origin）赋值给type占位符，只是刚好没有触发报错而已。

修复方案 #

正确的思路是：点击卡片时，只关注当前点击的卡片内的标题元素，根据这个标题的类名判断它属于哪个类别，再更新订单摘要对应的位置，完全不需要依赖循环索引。

修改后的JavaScript代码如下：

// 获取所有咖啡卡片
const planCards = document.querySelectorAll(".product__plan");
// 提前获取所有订单摘要的占位元素，避免重复查询DOM
const summaryElements = {
  drinkStyle: document.querySelector(".drink-style"),
  type: document.querySelector(".type"),
  quantity: document.querySelector(".quantity"),
  grind: document.querySelector(".grind"),
  delivery: document.querySelector(".delivery")
};

// 遍历每个卡片绑定点击事件
planCards.forEach(card => {
  card.addEventListener("click", () => {
    // 获取当前点击卡片内的标题元素
    const titleEl = card.querySelector(".product__plan--title");
    if (!titleEl) return; // 防御性判断，避免无标题的异常情况

    // 根据标题的类名，更新对应摘要位置的文本
    if (titleEl.classList.contains("brewed-type")) {
      summaryElements.drinkStyle.textContent = titleEl.innerText;
    } else if (titleEl.classList.contains("coffee-type")) {
      summaryElements.type.textContent = titleEl.innerText;
    } else if (titleEl.classList.contains("coffee-quantity")) {
      summaryElements.quantity.textContent = titleEl.innerText;
    } else if (titleEl.classList.contains("coffee-process")) {
      summaryElements.grind.textContent = titleEl.innerText;
    } else if (titleEl.classList.contains("coffee-delivery")) {
      summaryElements.delivery.textContent = titleEl.innerText;
    }
  });
});

额外优化提示 #

1. 把getElementsByClassName换成querySelectorAll：前者返回动态HTMLCollection，后者返回静态NodeList，逻辑更稳定，避免DOM变化导致的意外问题。
2. 提前缓存摘要元素：避免每次点击都重复查询DOM，提升性能。
3. 修复CSS小错误：你原来的CSS里border.1em solid red应该改成border: 0.1em solid red，否则边框样式不会生效。

备注：内容来源于stack exchange，提问作者Olaitan