Это код 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', я понятия не имею, что не так в моем коде.
Запустите свой код, когда документ будет готов с использованием события 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>
document.getElementById()
возвращает null
когда он не может найти элемент, предоставленный его аргументом. Убедитесь, что элемент с table
id существует в DOM, когда выполняется ваш скрипт.
console.log(document.getElementById('test'));
console.log(document.getElementById('test_wrong'));//bad reference!
<div id="test"></div>