自定义购物车开发问题：JavaScript自动生成多余空白div

问题根源 #

1. 全局变量污染：你把imagevalue、namevalue、pricevalue声明在全局作用域，一旦itemnum不在1-4的有效范围内，这些变量会保留之前的值（甚至是空字符串），导致生成内容异常的div。
2. 未过滤无效输入：不管itemnum是否对应有效商品，代码都会执行创建div并追加到页面的逻辑，这直接导致了多余空白div的出现。
3. 模板字符串的换行缩进会被解析为空白字符，虽然不是核心问题，但也会带来不必要的空白节点。

修复后的代码 #

function addItem(itemnum){
    // 用对象映射替代冗余的else if，后续新增商品直接扩展对象即可
    const itemMap = {
        "1": {
            image: "hoodie.png",
            name: "Spartan Hoodie",
            price: "$50"
        },
        "2": {
            image: "longsleeve.png",
            name: "Spartan Long-tee",
            price: "$30"
        },
        "3": {
            image: "cutoff.png",
            name: "Spartan Cutoff",
            price: "$25"
        },
        "4": {
            image: "waterbottle.png",
            name: "Spartan Bottle",
            price: "$15"
        }
    };

    // 先校验itemnum是否对应有效商品，无效则直接终止函数
    const targetItem = itemMap[itemnum];
    if(!targetItem) return;

    // 创建元素并填充内容
    const div = document.createElement('div');
    div.className = 'item';
    // 用模板字符串插值替代字符串拼接，更易读；trim()去除首尾空白字符
    div.innerHTML = `
        <div class="card">
            <div class="img"><img src="../images/${targetItem.image}"></div>
            <div class="title">${targetItem.name}</div>
            <div class="price">${targetItem.price}</div>
            <i class="fa fa-trash" onclick="deleteItem(${itemnum})"></i>
        </div>
    `.trim();
    document.getElementById("items").appendChild(div);
}

核心优化点 #

• 把商品数据整合到对象映射中，替代冗余的条件判断，代码更简洁易维护。
• 将变量改为局部作用域，彻底避免全局变量污染，每次调用addItem都是独立的上下文。
• 新增无效输入校验，只有当itemnum对应有效商品时才创建div，从根源杜绝多余空白div。
• 用模板字符串插值替代字符串拼接，提升代码可读性；通过trim()去除模板字符串的首尾空白，减少不必要的空白节点。

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