Kogusumma toidukalkulaatoris JavaScriptis

Teeme nüüd nii, et tabeli all kuvataks ostude kogusumma. Siin on nüansse.

Kui mõelda olukorrale, saab selgeks, et summat tuleks korrigeerida mitte ainult uue ostu lisamisel, vaid ka kustutamisel ja muutmisel.

Ma sooviksin sellisel juhul teha mõne funktsiooni, nimetame selle recountTotal, mis teeb täieliku kogusumma ümberarvutuse. See tähendab, et see käib tsükliga läbi kõik ostud ja summeerib nende veeru cost sisu.

Olles sellise funktsiooni, saame seda kutsuda igas kohas, kus on oodata mingeid kogusumma muutusi. Loomulikult pole see veidi optimaalne iga kord ümber arvutada kogu summat. Kuid me saame olulise koodi lihtsustamise.

Kasutame kavandatud funktsiooni uue ostu loomisel:

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, 'kustuta', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // arvutame ümber kogusumma
});

Siin on kirjeldatud funktsiooni mustand:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// leiame summa ja kirjutame selle #total
	}
}

Rakendage minu poolt kirjeldatud funktsioon recountTotal.