Question

我目前正在转换我的朋友网站，因为它不是通过将当前前端改为引导前端来“移动友好”。

我一直在开发一个测试站点，它只是同一台服务器上的一个子域。

但我在购物车页面遇到了问题。

当我按下重新计算按钮时，购物车不再重新计算其总数。它在旧网站上运行正常。我不知道我改变了什么来打破它？

我使用Chrome开发工具（F12）调试了JavaScript，并且订购了第150行.php出现此错误：

Uncaught TypeError: Cannot read property 'value' of undefined

这是违规代码：

if (document.forms[1].elements["qty" + count].value == "" ||
    document.forms[1].elements["qty" + count].value == 0) {
        document.forms[1].elements["qty" + count].value = 0;
        showInCart = false;
}

我不明白为什么会收到此错误？谷歌搜索给出了模糊的答案。这就是我在StackOverflow上的原因。

顺便说一句，如果你想重新创建我需要的问题：

转到主页
从图片网格中选择产品类别，例如“得到服装创意......”
将项目添加到购物篮中。
一旦页面发布到Order.php更改其数量。
点击重新计算按钮。

为什么Javascript不再从数量字段中获取值???

非常感谢任何帮助。

这是完整的功能：

<script type="text/javascript">
    function recalculateTotal(){        
        var lineTotal = 0;
        var subTotal = 0;
        var total = 0;
        var hiddenStuff = "";
        var count;
        var i;
        var orderURL="register.php?orderDetails=";

        items = new Array(<?=$itemList?>);                  

        for (i in items){
            var cNum = 0;
            var pNum = 0;
            var qNum = 0;

            count = items[i];

            cNum = (count * 4) + 1;

            var showInCart = true;                  

            // the next line is broken!
            if (document.forms[1].elements["qty" + count].value == "" || document.forms[1].elements["qty" + count].value == 0){
                document.forms[1].elements["qty" + count].value = 0;
                showInCart = false;
            }           

            lineTotal = document.forms[1].elements["qty" + count].value * document.forms[1].elements["price" + count].value;                
            document.getElementById("lTotal" + count).innerHTML = formatCurrency(lineTotal);
            subTotal += lineTotal;

            if (hiddenStuff == ""){
                hiddenStuff = hiddenStuff + showInCart + ":" + document.forms[1].elements["productId" + count].value + ':' + document.forms[1].elements["qty" + count].value;
            }else{
                hiddenStuff = hiddenStuff + ":" + showInCart + ":" + document.forms[1].elements["productId" + count].value + ':' + document.forms[1].elements["qty" + count].value;
            }

        }           

        document.getElementById("subTotal").innerHTML = formatCurrency(subTotal);
        for (var j in delivery_prices){
            if (subTotal >= delivery_prices[j].total_amount_start && subTotal <= delivery_prices[j].total_amount_end){
                document.getElementById('delivery').innerHTML = delivery_prices[j].delivery_price;
                total = subTotal + delivery_prices[j].delivery_price;
            }
        }
        document.getElementById("total").innerHTML = formatCurrency(total);
        document.forms[1].elements["orderDetails"].value = hiddenStuff;
        orderURL = orderURL + hiddenStuff;
        var myrequest = $.ajax({
                url: orderURL,
                type: "get",
            });
        myrequest.done(function (response){
            updateBasket();
        });

    }
</script>

非常感谢。

Answer 1

如果元素未在DOM上声明或未加载，则会出现此错误。你可以做这些事情来解决这个问题：

1.包裹函数内的所有内容并将其附加到window.onload。像这样：

<script type = "text/javascript">
function foo(){
.....//Your JavaScript code here
}

window.onload = foo;
</script>

检查HTML页面中是否存在所有元素。



我不确定这是不是问题，但我认为值得一提。将第150行更改为：

if (document.forms[0].elements["qty" + count].value == "" ||
    document.forms[0].elements["qty" + count].value == 0) {
    document.forms[0].elements["qty" + count].value = 0;
    showInCart = false;
}

在上面的代码片段中，我将0的出现更改为0.因为JavaScript从0开始计数而不是1.因此，如果要访问第一个表单的内容，请使用此点，否则忽略此点。

Answer 2

问题是document.forms[1]指向没有qty0元素的表单。实际上它指向你的“搜索表单”。 “订单表单”在document.forms选择提供的数组中有0个索引。

使用document.forms进行的表单选择具有升序。在结果从零开始的数组中，“0”索引将指向第一种形式，“1”索引指向第二种形式。在旧网站上，“搜索表单”在“订单”之前呈现。这就是为什么它在你的新网站上工作，表格被切换，所以索引也应该改变。

Answer 3

您已经拥有了一个可以使用的变量。

替换：

if (document.forms[1].elements["qty" + count].value == "" ||
document.forms[1].elements["qty" + count].value == 0) {
    document.forms[1].elements["qty" + count].value = 0;
    showInCart = false;
}

通过：

if (document.forms[1].elements["qty" + i].value == "" ||
    document.forms[1].elements["qty" + i].value == 0) {
    document.forms[1].elements["qty" + i].value = 0;
    showInCart = false;
}

Javascript - 未捕获的TypeError：无法读取未定义的属性“值”

3 个答案: