Javascript - 未捕获的类型错误 : Cannot read property 'value' of undefined

Question

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

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

这是旧网站:http://bit.ly/1hurTNB

这是新网站:http://bit.ly/1hus0IV

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

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

我已经使用 Chrome 开发工具 (F12) 调试了 JavaScript，order.php 的第 150 行出现了这个错误:

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 的原因。

顺便说一句，如果你想重现我的问题，你需要:

1. 进入首页

2. 从图片网格中选择一个产品类别，例如“获得服装创意……”

3. 将商品添加到购物车。

4. 在页面发布到 Order.php 后更改其数量。

5. 点击重新计算按钮。

为什么 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.Wrap every thing inside a function and attach it to the window.onload. Like this :

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

window.onload = foo;
</script>

2. Check whether all the elements are present in the HTML page or not.

3. I am not sure that this is the problem, but I think its worth mentioning. Change the line no.150 to :

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;
}

In the above code snippet I've changed the occurrence of 1 with 0. Because JavaScript starts counting from 0 not 1. So if you want to access the content of first form then use this point otherwise ignore this point.