点击加购按钮时如何获取对应商品的JSON数据

你遇到的问题来自两个代码错误：

• 循环生成商品DOM时，给所有商品的名称、价格、加购按钮都设置了相同的id属性。HTML标准中id是页面全局唯一标识，document.getElementById()永远只会返回页面中第一个匹配id的元素，所以不管点击哪个按钮，你查到的都是第一个商品的名称。
• 你调用的.val()是jQuery库的专属方法，原生DOM对象不存在这个方法，调用自然不会生效。原生JS获取普通元素文本用innerText/textContent，获取表单输入值用value。

方案1：渲染时直接传入商品标识（实现简单） #

去掉所有重复的id属性，渲染商品时直接把当前商品的唯一编码传入点击事件函数，函数里直接通过编码从商品数组中拿到完整数据即可，修复后完整代码如下：

const Sheet = [
        {
            "Code": "A-0-1", 
            "UPC": "Photos/4009803054728.jpg",
            "Title": "U.S.S. Constitution",
            "Price": "$34",
            "InStock": "7"
        },
        {
            "Code": "A-0-2",
            "UPC": "Photos/4009803073996.jpg",
            "Title": "Revell 07399 VW Samba Bus Model Kit",
            "Price": "$38",
            "InStock": "8"
        },
    ]
const productsEl = document.querySelector(".Sheet");

function getProducts() {
    Sheet.forEach((product) => {
        productsEl.innerHTML += `<div class="productContainer" data-code="${product.Code}">
            <div class="img">
                <img src="${product.UPC}" alt="Image Unavailable" height="170" width="170">
            </div>
            <div class="itemdesc">
                <h2 class="itemName">${product.Title}</h2>
                <h4 class="price"><span>${product.Price}</span></h4>
                <div class="desc">
                    <p>${product.Code}</p>
                </div>
                <div class="stock">
                    <p> ${product.InStock} Units</p>
                </div>
                <div class="addToCart">
                    <button onclick="addToCart('${product.Code}')"> Add to Cart</button>
                </div>
            </div>
    </div>`; 
    })
}
getProducts(); 

function addToCart(productCode) {
    const currentProduct = Sheet.find(item => item.Code === productCode);
    console.log(currentProduct.Title); // 这里就能拿到对应商品的名称
    // 后续加购逻辑直接操作currentProduct即可
}

对应的HTML部分不需要改动，还是保留：

<div class="Sheet"></div>

方案2：事件委托（性能更优，推荐） #

不需要给每个按钮单独绑定点击事件，只需要给外层商品容器绑定一次事件，点击时通过DOM节点关系找到对应商品即可，适合商品数量多的场景：

// getProducts方法里删掉按钮上的onclick属性，其他渲染逻辑和方案1一致
getProducts();

// 统一绑定一次点击事件
productsEl.addEventListener('click', function(e) {
    // 判断点击目标是加购按钮
    if (e.target.closest('.addToCart button')) {
        const container = e.target.closest('.productContainer');
        const productCode = container.dataset.code;
        const currentProduct = Sheet.find(item => item.Code === productCode);
        console.log(currentProduct);
    }
})

• 批量渲染列表时，不要给重复元素设置相同id，需要做元素选择优先用class
• 拼接HTML属性时，属性值一定要用双引号包裹，避免路径、文本里有空格或特殊字符时DOM解析错乱
• 原代码里.stock的div标签没有闭合，会导致DOM结构错乱，上面的修复代码已经补上了闭合标签。

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