Total Biaya dalam Kalkulator Produk JavaScript

Sekarang mari kita buat agar total belanja ditampilkan di bawah tabel. Ada beberapa hal yang perlu diperhatikan.

Jika kita memikirkan situasinya, akan menjadi jelas bahwa total harus disesuaikan tidak hanya saat menambahkan pembelian baru, tetapi juga saat menghapus dan mengedit.

Saya akan menyarankan dalam kasus seperti itu untuk membuat sebuah fungsi, sebut saja recountTotal, yang akan melakukan penghitungan ulang penuh total. Artinya, fungsi ini akan melakukan perulangan melalui semua pembelian dan menjumlahkan isi dari kolom cost mereka.

Dengan memiliki fungsi seperti itu, kita dapat memanggilnya di mana saja yang diperkirakan ada perubahan pada total. Tentu saja, sedikit tidak optimal untuk menghitung total setiap kali. Namun, kita akan mendapatkan penyederhanaan kode yang signifikan.

Mari gunakan fungsi yang diusulkan saat membuat pembelian baru:

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, 'hapus', 'remove');
  
  table.appendChild(tr);
  recountTotal(); // hitung ulang total biaya
});

Berikut adalah kerangka fungsi yang dijelaskan:

javascriptfunction recountTotal() {
  let costs = table.querySelectorAll('.cost');
  
  if (costs) {
    // temukan jumlah total dan tuliskan ke #total
  }
}