Jumlah Keseluruhan dalam Kalkulator Produk pada JavaScript

Sekarang mari kita buat supaya di bawah jadual ditampilkan jumlah keseluruhan pembelian. Ada nuansa di sini.

Jika kita memikirkan situasinya, maka akan menjadi jelas, bahawa jumlah perlu diselaraskan bukan sahaja apabila pembelian baru ditambah, tetapi juga apabila dibuang dan apabila disunting.

Saya cadangkan dalam kes sedemikian untuk membuat sesuatu fungsi, mari kita namakannya recountTotal, yang akan melakukan pengiraan semula penuh jumlah. Iaitu, ia akan mengulangi semua pembelian dalam gelung dan menjumlahkan kandungan lajur cost mereka.

Dengan memiliki fungsi sedemikian, kita boleh memanggilnya di mana-mana tempat yang mengandaikan sebarang perubahan pada jumlah keseluruhan. Sudah tentu, sedikit tidak optimum untuk mengira semula jumlah keseluruhan setiap kali. Namun, kita akan mendapat penyederhanaan kod yang ketara.

Kita akan gunakan fungsi yang dicadangkan semasa mencipta pembelian baru:

add.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, 'buang', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // kira semula jumlah keseluruhan
});

Berikut adalah rangka fungsi yang diterangkan:

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

Laksanakan fungsi recountTotal yang saya terangkan.