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

I am currently converting my friends website, as it's not "mobile friendly" by changing his current frontend into a bootstrap front end.

I've been working on a test site which is just a sub-domain on the same server.

This is the old website: http://bit.ly/1hurTNB

This is the new website: http://bit.ly/1hus0IV

But I've encountered a problem with the shopping cart page.

The shopping cart no longer recalculates its total when I press the recalculate button. It works fine on the old website. I dont know what I've changed to break it?

I've debugged the JavaScript using Chrome Dev Tools (F12) and line no 150 of order.php has this error:

Uncaught TypeError: Cannot read property 'value' of undefined 

And this is the line of offending code:

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

I don't understand why I am getting this error? Googling around gives vague answers. Which is why I am here on StackOverflow.

BTW if you want to recreate my problem you'll need to:

  1. go to the homepage

  2. choose a product category from the grid of pictures e.g. "get costume ideas..."

  3. add an item to the basket.

  4. once the page posts to Order.php Change its Quantity.

  5. click the recalculate button.

Why is the Javascript no longer picking up the values from the quantity fields???

Any help is greatly appreciated.

Here is the function in its entirety:

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

Thanks very much.

dongzhuo6137
dongzhuo6137 :stackoverflow.com/questions/500504/...
大约 5 年之前 回复
doujie3888
doujie3888 给表单一个ID并使用它而不是表单集合-你也有jQuery。所以使用它。
大约 5 年之前 回复
dqsot35145
dqsot35145 和任何解释为什么会这样,拜托?
大约 5 年之前 回复
duan205571
duan205571 不要在for循环中使用数组,使用数组的forEach方法或常规for循环
大约 5 年之前 回复

4个回答



当元素未在DOM上声明或未加载时,会出现此错误。 您可以执行以下操作来解决此问题:</ p>


1.将函数内的所有内容包装并将其附加到 window.onload </ code>。 像这样:</ p>
</ blockquote>

 &lt; script type =“text / javascript”&gt; 
function foo(){
...... // 你的JavaScript代码在这里

window.onload = foo;
&lt; / script&gt;
</ code> </ pre>


    \ n
  1. 检查 HTML </ code>页面中是否存在所有元素。</ p> </ li>

  2. 我不确定这是 是问题,但我认为值得一提。 将第150行更改为:</ p> </ li>
    </ ol>
    </ blockquote>

      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;
    }
    </ code> </ pre>

  3. 在上面的代码片段中我改变了 出现1为0.因为JavaScript从0开始计数而不是1.因此,如果要访问第一个表单的内容,请使用此点,否则忽略此点。</ p>
    </ blockquote>
    </ div >

展开原文

原文

This error arises when the elements are not either declared or not loaded on the DOM. You can do these things to solve this problem :

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>
  1. Check whether all the elements are present in the HTML page or not.

  2. 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.

dongwan5381
dongwan5381 我只是欢呼:-)
大约 5 年之前 回复
douwenpin0428
douwenpin0428 别客气!!! 正如你所说,这个答案有所帮助,那么你应该接受这个答案。 点击我的答案投票下方的刻度标记即可。
大约 5 年之前 回复
doupingtang9627
doupingtang9627 你的建议完美无缺。 将document.forms从[1]更改为[0]修复了问题。 我非常感谢你的帮助。 非常感谢你。
大约 5 年之前 回复



您将解决将 document.forms [1] </ strong>更改为文档的问题。 表单[0] </ strong> </ p>

问题是表单的位置已更改。 将表单[0] </ strong>放置即可。</ p>

Aitor </ p>
</ div>

展开原文

原文

You'll solve the problem changing document.forms[1] into document.forms[0]

The problem is that the position of the form has changed. Put forms[0] and it will work.

Aitor



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

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

展开原文

原文

The problem is that document.forms[1] points to the form that has no qty0 element. Actually it points to your "search form". "Order form" has 0 index in the array provided by document.forms selection.

The form selection made with document.forms has ascending order. In resulted zero-based array, "0" index will point to first form, "1" index to second etc. On your old website, "search form" is rendered before "order form". That is why it works there, in its turn, on your new site the forms are switched so indexes should be changed too.



您已经有一个可以使用的变量。</ p>

替换:</ p> \ n

  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;
}
</ code> </ pre>

通过:</ p>

  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;
}
</ code> </ pre>
</ div>

展开原文

原文

You already have a variable that you can use.

Replace :

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

By :

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐