Question

这是我的发布代码

for cart, cart_index in cart_collections
table(style='width:100%; margin-bottom:20px;',id="table", border='1')
  tr
    td(style="background:#0077cc; color:#fff")
      strong Cart ID: 
      i #{cart.cart_id}
        for product, product_index in cart.product
          tr 
            td No. #{product_index + 1}
            td Name: #{product.name}
            td Qty: #{product.qty}
            td Price (RM): #{product.price}
            td Pv: #{product.pv}
            td Sub Price (RM): #{product.sub_price}
            td Sub pv: #{product.sub_pv}
            input(
                type="checkbox"
                class="checkbox1"
                id="checkbox1"
                value=`${product.sub_price}`
                onclick="add(this)"
              )
            strong Total Price:RM #{product.sub_price}
          strong Total Amount Need to Pay = RM 
          b(id="val")

和我的js函数

    var table = document.getElementById("table"), sumVal = 0;

    for(var i =1; i < table.rows.length; i++)
    {
    sumVal = sumVal + table.rows[i].cells[6].innerHTML;
    }

    console.log(sumVal);

显示Uncaught TypeError：无法读取null的属性“行”，我不知道代码中有什么错误。

Answer 1

document.getElementById()在无法找到其参数提供的元素时返回null。执行脚本时，请确保ID为table的元素在DOM中存在。

console.log(document.getElementById('test'));
console.log(document.getElementById('test_wrong'));//bad reference!

<div id="test"></div>

Answer 2

使用DOMContentLoaded事件在文档准备就绪时运行代码。如果您在文档的开头运行脚本，则代码可能在元素加载之前就已在运行，因此找不到任何元素。

document.addEventListener("DOMContentLoaded", function(e){
    var table = document.getElementById("table"), sumVal = 0;

    for(var i =1; i < table.rows.length; i++)
    {
    sumVal = sumVal + table.rows[i].cells[6].innerHTML;
    }

    console.log(sumVal);
});

如果所有DOM元素都存在，您还可以在文档底部的body标记之前放置脚本标记，以执行脚本。

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<table id="table">
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td>1</td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td>1</td></tr>
</table>
<script>
(function(){
    var table = document.getElementById("table"), sumVal = 0;

    for(var i =1; i < table.rows.length; i++)
    {
    sumVal += +table.rows[i].cells[6].innerHTML;
    }

    console.log(sumVal);
})();
</script>
</body>
</html>

总和的Javascript。未捕获的TypeError：无法读取null的属性“行”

2 个答案: