使用JavaScript实现购物车时，数字输入框更新报错求助

咱们直接说核心问题：你遇到的Uncaught TypeError: Cannot read property 'value' of undefined错误，根源在于**updateFromShoppingCart函数内部的无参递归调用**，同时还有一处变量名拼写错误，另外还有个隐性的表格结构bug需要修正。

具体问题拆解 #

1. 无参递归调用导致element未定义
   在updateFromShoppingCart函数里，你更新完数据后调用了updateFromShoppingCart();——这里没有传入任何参数，此时函数里的element变量就是undefined，自然无法读取它的value属性，这就是报错的直接原因。

2. else分支的变量名错误
   函数末尾的else分支里写了deleteRowFromTable(ele);，但你的函数参数是element，ele是未定义的变量，这里应该改成element。

3. 表格行结构的隐性bug
   在addRowsToTable函数里，你用table.insertRow(1)创建了一行，然后给这行的innerHTML赋值了完整的<tr>...</tr>，这会导致表格里出现嵌套的<tr>标签，破坏DOM结构，后续操作行和单元格时可能会出现意外问题。

修复后的代码 #

修正updateFromShoppingCart函数 #

function updateFromShoppingCart(element){
    saveItemsQtyToStorage();
    loadItemsQtyFromStorage();
    console.log(element.value);
    
    if(element.value > 0){
        var table = document.getElementById("shop-table");
        var new_quatity = element.value;
        var id = element.id;
        ItemsQty[id] = new_quatity;
        var parentRowIndex = element.parentNode.parentNode.rowIndex;
        
        table.rows[parentRowIndex].cells[5].innerText = ItemsQty[id] * ItemPrice[id];
        saveItemsQtyToStorage();
        loadItemsQtyFromStorage();
        // 移除无参的递归调用，直接执行总价更新即可
        cartTotalPrice();
    } else {
        // 修正变量名为element
        deleteRowFromTable(element);
    }
}

修正addRowsToTable函数的表格结构问题 #

function addRowsToTable(product_value, product_name, product_image, product_price, product_qty, sub_total){
    // 优化sessionStorage判断，避免未设置时出现NaN
    if (parseInt(sessionStorage.getItem('Total_Items')) > 0){
        var table = document.getElementById("shop-table");
        var row = table.insertRow(1);
        // 去掉外层的<tr>标签，直接写单元格内容
        row.innerHTML = 
            "<td>\n" +
            "  <button value=\"" + product_value + "\" onclick=\"deleteRowFromTable(this);\">Remove</button>\n" +
            "</td>\n" +
            "<td>\n" +
            "  <img src=\""+ product_image+"\" style=\"width: 60px; height: 80px;\">\n" +
            "</td>\n" +
            "<td>" + product_name + "</td>\n" +
            "<td>\n" +
            "  <input id=\"" + product_value + "\" type=\"number\" name=\"quantity\" min=\"0\" max=\"20\" value=\""+ product_qty +"\" onclick=\"updateFromShoppingCart(this);\">\n" +
            "</td>\n" +
            "<td>"+ product_price +"</td>\n" +
            "<td>"+ sub_total+"</td>";
    }
}

额外优化建议 #

• 建议使用addEventListener绑定事件，替代HTML内联的onclick，这样代码更易维护，也能避免一些作用域问题。
• 操作sessionStorage时，最好用getItem和setItem方法，同时记得做类型转换，避免字符串和数字的隐式转换bug。

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