Totale Bedrag in Produk Sakrekenaar op JavaScript

Laat ons nou maak dat die totale aankoopbedrag onder die tabel vertoon word. Daar is nuances.

As jy die situatie oorweeg, sal dit duidelik word dat die totaal nie net moet aanpas by die toevoeging van 'n nuwe aankoop nie, maar ook by verwydering en wysiging.

Ek sou in so 'n geval voorstel om 'n sekere funksie te skep, laat ons dit recountTotal noem, wat 'n volledige herberekening van die totaal sal uitvoer. Dit sal deur al die aankope sirkuleer en die inhoud van hul cost-kolom optel.

Met so 'n funksie kan ons dit roep op enige plek waar veranderinge aan die totale bedrag veronderstel is. Natuurlik is dit nie heeltemal optimaal om elke keer die totale bedrag te bereken nie. Maar ons sal aansienlike vereenvoudiging van die kode verkry.

Laat ons die voorgestelde funksie gebruik wanneer 'n nuwe aankoop geskep word:

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, 'verwyder', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // herbereken die totale bedrag
});

Hier is die skepping van die beskryfde funksie:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// vind die som en skryf dit in #total
	}
}

Implementeer die funksie recountTotal wat ek beskryf het.