JavaScript购物车表格点击添加按钮无更新问题排查求助

我帮你梳理了代码里导致功能失效的几个核心问题，逐个解决后就能正常运行了：

1. 按钮点击事件的参数传递错误 #

你在生成产品表格时，按钮的onclick事件写的是addCart(products[i].product_id, this)，但因为是通过字符串拼接生成HTML，循环结束后变量i的值已经变成了products.length，此时products[i]是undefined，点击按钮时会传递无效参数给addCart函数，自然找不到对应的商品。

修复方式：直接把当前商品的product_id作为字符串值拼接到onclick里，同时把按钮类型改成button（避免submit触发默认页面刷新）：

html += "<td>" + "<button type='button' onclick='addCart(\"" + products[i].product_id + "\")'>Add to Cart</button>" + "</td>";

2. 重复定义addCart函数 #

你的代码里出现了两次function addCart(product_id)的定义，后面的函数会覆盖前面的，而且第二个addCart没有调用renderCartTable()，导致即使商品加入购物车，页面也不会更新。

修复方式：删掉重复的函数定义，保留一个完整的addCart，确保最后调用renderCartTable()更新购物车UI。

3. renderCartTable函数不完整 #

你提供的代码里这个函数没有写完，缺少生成购物车表格HTML和更新DOM的逻辑，这会导致购物车数据更新后页面毫无变化。

完整的renderCartTable示例：

function renderCartTable() {
    var html = "<table border='1|1'>";
    html += "<tr><td>Product Name</td><td>Description</td><td>Quantity</td><td>Item Total</td><td>Actions</td></tr>";
    var grandTotal = 0;
    
    if (cart.length === 0) {
        html += "<tr><td colspan='5'>Your cart is empty</td></tr>";
    } else {
        for (var i = 0; i < cart.length; i++) {
            var item = cart[i];
            var itemTotal = item.product.product_price * item.product_qty;
            grandTotal += itemTotal;
            
            html += "<tr>";
            html += "<td>" + item.product.product_id + "</td>";
            html += "<td>" + item.product.product_desc + "</td>";
            html += "<td>" + item.product_qty + "</td>";
            html += "<td>$" + itemTotal.toFixed(2) + "</td>";
            html += "<td>";
            html += "<button onclick='subtractQuantity(\"" + item.product.product_id + "\")'>-</button> ";
            html += "<button onclick='addQuantity(\"" + item.product.product_id + "\")'>+</button> ";
            html += "<button onclick='removeItem(\"" + item.product.product_id + "\")'>Remove</button>";
            html += "</td>";
            html += "</tr>";
        }
    }
    
    html += "</table>";
    document.getElementById("location2").innerHTML = html;
    // 更新总计金额
    document.getElementById("location3").textContent = "$" + grandTotal.toFixed(2);
}

修正后的完整代码 #

<!DOCTYPE html>
<html>
<body>
<br/>
<p id="location1"></p>
<br/>
<h2>Shopping Cart</h2>
<p id="location2"></p>
<h2>Grand Total:</h2>
<p id="location3"></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var products = [];
var cart = [];

// 定义商品数据
var product1 = ["Anvil", "Premium Grade Iron", 119.99];
var product2 = ["Female Roadrunner Costume", "Guaranteed to attract Male Roadrunners", 54.99];

function product_setup(product) {
    var productID = product[0];
    var product_desc = product[1];
    var qty = 1;
    var price = product[2];
    var newProduct = {
        product_id: null,
        product_desc: null,
        product_qty: 0,
        product_price: 0.00,
    };
    newProduct.product_id = productID;
    newProduct.product_desc = product_desc;
    newProduct.product_qty = qty;
    newProduct.product_price = price;
    products.push(newProduct);
}

product_setup(product1);
product_setup(product2);

function product_table() {
    var html = "<table border='1|1'>";
    html += "<tr><td>Product Name</td><td>Product Description</td><td>Price</td><td>Add to Cart</td></tr>";
    for (var i = 0; i < products.length; i++) {
        html += "<tr>";
        html += "<td>" + products[i].product_id + "</td>";
        html += "<td>" + products[i].product_desc + "</td>";
        html += "<td>$" + products[i].product_price.toFixed(2) + "</td>";
        // 修正按钮参数传递与类型
        html += "<td>" + "<button type='button' onclick='addCart(\"" + products[i].product_id + "\")'>Add to Cart</button>" + "</td>";
        html += "</tr>";
    }
    html += "</table>";
    document.getElementById("location1").innerHTML = html;
}

product_table();

function addCart(product_id) {
    for (var i = 0; i < products.length; i++) {
        if (products[i].product_id == product_id) {
            var cartItem = null;
            for (var k = 0; k < cart.length; k++) {
                if (cart[k].product.product_id == products[i].product_id) {
                    cartItem = cart[k];
                    cart[k].product_qty++;
                    break;
                }
            }
            if (cartItem == null) {
                cartItem = {
                    product: products[i],
                    product_qty: 1
                };
                cart.push(cartItem);
            }
            renderCartTable();
            return; // 找到商品后退出循环，提升效率
        }
    }
}

function subtractQuantity(product_id) {
    for (var i = 0; i < cart.length; i++) {
        if (cart[i].product.product_id == product_id) {
            cart[i].product_qty--;
            if (cart[i].product_qty == 0) {
                cart.splice(i, 1);
            }
            break;
        }
    }
    renderCartTable();
}

function addQuantity(product_id) {
    for (var i = 0; i < cart.length; i++) {
        if (cart[i].product.product_id == product_id) {
            cart[i].product_qty++;
            break;
        }
    }
    renderCartTable();
}

function removeItem(product_id) {
    for (var i = 0; i < cart.length; i++) {
        if (cart[i].product.product_id == product_id) {
            cart.splice(i, 1);
            break;
        }
    }
    renderCartTable();
}

function renderCartTable() {
    var html = "<table border='1|1'>";
    html += "<tr><td>Product Name</td><td>Description</td><td>Quantity</td><td>Item Total</td><td>Actions</td></tr>";
    var grandTotal = 0;
    
    if (cart.length === 0) {
        html += "<tr><td colspan='5'>Your cart is empty</td></tr>";
    } else {
        for (var i = 0; i < cart.length; i++) {
            var item = cart[i];
            var itemTotal = item.product.product_price * item.product_qty;
            grandTotal += itemTotal;
            
            html += "<tr>";
            html += "<td>" + item.product.product_id + "</td>";
            html += "<td>" + item.product.product_desc + "</td>";
            html += "<td>" + item.product_qty + "</td>";
            html += "<td>$" + itemTotal.toFixed(2) + "</td>";
            html += "<td>";
            html += "<button onclick='subtractQuantity(\"" + item.product.product_id + "\")'>-</button> ";
            html += "<button onclick='addQuantity(\"" + item.product.product_id + "\")'>+</button> ";
            html += "<button onclick='removeItem(\"" + item.product.product_id + "\")'>Remove</button>";
            html += "</td>";
            html += "</tr>";
        }
    }
    
    html += "</table>";
    document.getElementById("location2").innerHTML = html;
    document.getElementById("location3").textContent = "$" + grandTotal.toFixed(2);
}

// 初始化购物车显示
renderCartTable();
</script>
</body>
</html>

额外小提示 #

尽量避免用字符串拼接生成HTML，后期维护成本很高。可以尝试用ES6模板字符串（`...`）或者DOM API（比如createElement）来生成，代码可读性会提升很多~

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