Javascript для суммы. uncaught typeerror: невозможно прочитать строки свойства со значением null.

Это МОЙ код паба

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

1
0
1 205
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

console.log(document.getElementById('test'));
console.log(document.getElementById('test_wrong'));//bad reference!
<div id="test"></div>
Ответ принят как подходящий

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

Другие вопросы по теме