Ukupni iznos u kalkulatoru proizvoda na JavaScript-u

Hajde sada da napravimo da se ispod tabele prikazuje ukupni iznos kupovine. Ovdje postoje nijanse.

Ako se situacija razmotri, postaće jasno da se zbir mora korigovati ne samo pri dodavanju nove kupovine, već i pri brisanju i pri uređivanju.

Predložio bih u tom slučaju da napravimo određenu funkciju, nazvaćemo je recountTotal, koja će izvršavati potpuni preračun iznosa. To znači da će proći kroz sve kupovine petljom i sabrati sadržaj njihove kolone cost.

Imajući takvu funkciju, moći ćemo da je pozivamo na bilo kom mestu gde se pretpostavljaju neke promene ukupnog iznosa. Naravno, donekle nije optimalno svaki put izračunavati ukupni iznos. Međutim, dobićemo značajno pojednostavljenje koda.

Koristimo pretpostavljenu funkciju prilikom kreiranja nove kupovine:

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, 'obriši', 'remove');
  
  table.appendChild(tr);
  recountTotal(); // preračunaćemo ukupni iznos
});

Evo šablona opisane funkcije:

javascriptfunction recountTotal() {
  let costs = table.querySelectorAll('.cost');
  
  if (costs) {
    // pronađemo zbir i upišemo ga u #total
  }
}