Całkowita suma w kalkulatorze produktów w JavaScript

Zróbmy teraz tak, aby pod tabelą wyświetlała się całkowita suma zakupów. Są tu niuanse.

Jeśli przemyśleć sytuację, to stanie się jasne, że suma powinna korygować się nie tylko przy dodawaniu nowego zakupu, ale także przy usuwaniu i edycji.

Proponuję w takim przypadku zrobić pewną funkcję, nazwijmy ją recountTotal, która będzie wykonywać pełne przeliczenie sumy. To znaczy będzie przechodzić pętlą po wszystkich zakupach i sumować zawartość ich kolumny cost.

Mając taką funkcję, będziemy mogli wywoływać ją w dowolnym miejscu, gdzie przewidywane są jakieś zmiany całkowitej sumy. Oczywiście, trochę nie optymalnie za każdym razem przeliczać całkowitą sumę. Ale otrzymamy znaczną prostotę kodu.

Użyjmy przewidywanej funkcji przy tworzeniu nowego zakupu:

javascriptadd.addEventListener('click', function() {
  let tr = document.createElement('tr');
  
  createCell(tr, name.value, 'name');
  createCell(tr, price.value, 'price');
  createCell(tr, amount.value, 'amount');
  createCell(tr, price.value * amount.value, 'cost');
  createCell(tr, 'usuń', 'remove');
  
  table.appendChild(tr);
  recountTotal(); // przeliczmy całkowitą sumę
});

Oto szablon opisanej funkcji:

javascriptfunction recountTotal() {
  let costs = table.querySelectorAll('.cost');
  
  if (costs) {
    // znajdujemy sumę i zapisujemy ją w #total
  }
}