Question

我正在尝试使用Javascript模拟购物车，但每次更新输入数字的值以更新表时我都会收到错误：“未捕获的TypeError：无法读取未定义的属性'值'< / p>

当我使用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未定义，您将在{{1}上获得该错误行。

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

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

1 个答案: