Javascript для суммы. Uncaught TypeError: Невозможно прочитать свойство 'rows' из null

1

Это код MY pub

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', я понятия не имею, что не так в моем коде.

Теги:

2 ответа

0
Лучший ответ

Запустите свой код, когда документ будет готов с использованием события 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);
});

Вы также можете поместить тег сценария в нижней части документа перед закрывающим тегом body чтобы выполнить скрипт, когда все элементы DOM существуют.

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

document.getElementById() возвращает null когда он не может найти элемент, предоставленный его аргументом. Убедитесь, что элемент с table id существует в DOM, когда выполняется ваш скрипт.

console.log(document.getElementById('test'));
console.log(document.getElementById('test_wrong'));//bad reference!
<div id="test"></div>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню