javascript - 尝试使用 JavaScript 获取输入数字的值时出错

Question

我正在尝试仅使用 Javascript 模拟购物车，但每次更新输入数字的值以更新表格时都会出现错误:“未捕获类型错误:无法读取未定义的属性‘值’”

当我使用 console.log 查看值时，它显示了值，所以我不知道为什么它说它无法读取属性值。

我不知道出了什么问题。这是我将元素添加到表中的函数:

    function addRowsToTable(product_value, product_name, product_image, product_price, product_qty, sub_total){
    //console.log(value);
    if (sessionStorage.Total_Items > 0){
        var table = document.getElementById("shop-table");
        var row = table.insertRow(1);
        row.innerHTML = "<tr>\n" +
            "                <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>\n" +
            "            </tr>";
    }
}

这是我使用 onchange 事件更改输入数字标签的值后更新表格的函数:

    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;
        //console.log(ItemsQty[id]);
        table.rows[parentRowIndex].cells[5].innerText = ItemsQty[id] * ItemPrice[id];
        saveItemsQtyToStorage();
        loadItemsQtyFromStorage();
        updateFromShoppingCart();
        cartTotalPrice();
    }
    else{
        deleteRowFromTable(ele);
    }
}

这是表格的 HTML 代码"

<table id="shop-table">
            <tr>
                <th>Remove Product</th>
                <th>Product Image</th>
                <th>Product Description</th>
                <th>Qty.</th>
                <th>Unit Price</th>
                <th>Subtotal</th>
            </tr>
        </table>

错误图片:

谢谢。

Answer 1

你在递归调用 updateFromShoppingCart(); 而没有传递 element 参数，所以当它执行时， element 是未定义的，你将在 console.log 行中收到该错误。

如果您删除递归调用，它应该可以工作。