Как сделать общую сумму из JS в Django

let x = document.getElementById("food_price");

console.log(x);

enter image description here enter image description here

Я пытаюсь получить общее количество продуктов питания из JS, но не могу найти решение, может ли кто-нибудь помочь мне.

Ваш HTML

является недействительным, поскольку id должен быть уникальным во всем документе. Тем не менее, ваш id из food_price повторяется в каждой строке.

Решение, которое работало бы сейчас

Вот как это можно сделать сейчас:

let sum = 0;
let prices = document.querySelectorAll('[id=food_price]');
for (let i = 0; i < prices.length; i++) {
    sum += parseInt(prices[i].innerText.substring(2).trim());
}

!!! Но это все равно оставит ваш HTML недействительным!!!

Как улучшить свой HTML

Измените ваш шаблон Django так, чтобы вместо

<td class="text-right" id="food_price">

у вас будет 

<td class="text-right food_price">

если td будет иметь text-right и food_price класс одновременно. А затем измените решение на 

let sum = 0;
let prices = document.querySelectorAll('.food_price');
for (let i = 0; i < prices.length; i++) {
    sum += parseInt(prices[i].innerText.substring(2).trim());
}

Обратите внимание, что в JS мы изменяем только селектор. Пожалуйста, исправьте ваш HTML, чтобы он был валидным. Помните: идентификаторы должны быть уникальными во всем документе. Если что-то не уникально в документе, используйте class вместо этого.

let sum = 0;
let prices = document.querySelectorAll('.food_price');
for (let i = 0; i < prices.length; i++) {
    sum += parseInt(prices[i].innerText.trim().substring(3).trim());
}
console.log(sum);
<table>
    <tr>
        <td class="text-right food_price"> 
            RS. 2
        </td>
    </tr>
    <tr>
        <td class="text-right food_price"> 
            RS. 3
        </td>
    </tr>
    <tr>
        <td class="text-right food_price"> 
            RS. 5
        </td>
    </tr>
    <tr>
        <td class="text-right food_price"> 
            RS. 7
        </td>
    </tr>
</table>

Вернуться на верх