如何用JavaScript获取点击卡片的数据？报错排查求助

问题分析 #

1. getCardInfo调用无参数：点击事件里调用getCardInfo()时未传入id，函数内id为undefined，导致document.getElementById(undefined + "-product-name")返回null，触发Cannot read properties of null错误。
2. 事件回调参数错误：orderBasket作为点击事件的回调，浏览器触发事件时只会传入event对象，你定义的itemName和itemPrice实际是undefined，无法直接使用。
3. HTML模板ID需实际渲染：HTML里的${id}是模板语法，要确保实际渲染后是有效ID（比如1-product-name、pizza-product-name），否则通过ID查找元素必然失败。

修复方案 #

方案1：通过事件对象从点击的卡片内直接获取信息（推荐，无需依赖ID） #

修改JavaScript代码，利用event.currentTarget获取当前点击的卡片，再通过DOM查询获取内部元素的内容：

const cards = document.getElementsByClassName("cards");

// 获取卡片信息的函数，接收卡片元素作为参数
const getCardInfo = (cardElement) => {
    const cardName = cardElement.querySelector(".card-title").textContent;
    const cardPrice = cardElement.querySelector(".card-price").textContent;
    console.log({ cardName, cardPrice });
    return { cardName, cardPrice };
}

// 为每个卡片绑定点击事件
for (let i = 0; i < cards.length; i++) {
    cards[i].addEventListener("click", (event) => {
        const orderList = document.getElementById('orderList');
        if (!orderList) {
            console.error("未找到orderList元素");
            return;
        }
        // 获取当前点击的卡片信息
        const { cardName, cardPrice } = getCardInfo(event.currentTarget);
        
        // 创建订单项，处理价格格式避免重复符号
        const orderItem = document.createElement('li');
        const priceText = cardPrice.replace(/^\$/, "").replace(/PEN$/, "").trim();
        orderItem.textContent = `${cardName} $${priceText} PEN`;
        
        orderList.appendChild(orderItem);
    });
};

方案2：通过ID获取信息（需确保HTML渲染后ID有效） #

如果坚持用ID，要保证HTML里的${id}被替换成实际值（比如后端渲染或前端模板替换为"1"、"pizza"），同时修改点击事件传递正确的ID：

<!-- 渲染后的示例HTML，ID为具体值 -->
<div class="card cards" data-id="1">
  <img src="https://images.vexels.com/media/users/3/185266/isolated/lists/815ded7afc1c54dfb5a60f81f68f928b-pizza-slice-icon.png" class="card-img-top p-3" alt="...">
  <div class="card-body">
    <h5 class="card-title" id="1-product-name">Pizza</h5>
    <h5 class="text-muted fw-bold card-price" id="1-product-price">$12,50 PEN</h5>
  </div>
</div>

const cards = document.getElementsByClassName("cards");

const getCardInfo = (id) => {
    const cardNameElement = document.getElementById(id + "-product-name");
    const cardPriceElement = document.getElementById(id + "-product-price");
    if (!cardNameElement || !cardPriceElement) {
        console.error(`未找到ID为${id}-product-name或${id}-product-price的元素`);
        return null;
    }
    const cardName = cardNameElement.textContent;
    const cardPrice = cardPriceElement.textContent;
    console.log({ cardName, cardPrice });
    return { cardName, cardPrice };
}

for (let i = 0; i < cards.length; i++) {
    cards[i].addEventListener("click", (event) => {
        const orderList = document.getElementById('orderList');
        if (!orderList) {
            console.error("未找到orderList元素");
            return;
        }
        // 从卡片的data-id属性获取ID
        const cardId = event.currentTarget.dataset.id;
        const cardInfo = getCardInfo(cardId);
        if (!cardInfo) return;
        
        const { cardName, cardPrice } = cardInfo;
        const orderItem = document.createElement('li');
        const priceText = cardPrice.replace(/^\$/, "").replace(/PEN$/, "").trim();
        orderItem.textContent = `${cardName} $${priceText} PEN`;
        
        orderList.appendChild(orderItem);
    });
};

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