Tuotteiden laskimen kokonaissumma JavaScriptillä

Tehdään nyt niin, että taulukon alle tulostetaan ostosten kokonaissumma. Tässä on hienouksia.

Jos mietitään tilannetta, käy selväksi, että summan tulisi muuttua paitsi uuden ostoksen lisäyksen yhteydessä, myös poistettaessa ja muokattaessa.

Ehdotan tällöin, että teemme jonkinlaisen funktion, kutsukaamme sitä recountTotal:ksi, joka suorittaa summan täyden uudelleenlaskennan. Se siis käy läpi kaikki ostokset silmukassa ja laskee yhteen niiden cost -sarakkeen sisällön.

Kun meillä on tällainen funktio, voimme kutsua sitä missä tahansa kohdassa, jossa summaan voi tulla muutoksia. Tietenkin on hieman optimoimatonta laskea kokonaissumma uudelleen joka kerta. Mutta saamme siitä huomattavan koodin yksinkertaistamisen.

Käytetään ehdotettua funktiota uuden ostoksen luomisen yhteydessä:

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, 'poista', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // lasketaan kokonaissumma uudelleen
});

Tässä on kuvatun funktion runko:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// etsimme summan ja kirjoitamme sen #total -elementtiin
	}
}

Toteuta kuvaamani funktio recountTotal.