Συνολικό Ποσό στην Αριθμομηχανή Προϊόντων σε JavaScript

Ας κάνουμε τώρα έτσι ώστε κάτω από τον πίνακα να εμφανίζεται το συνολικό ποσό των αγορών. Εδώ υπάρχουν αποχρώσεις.

Αν σκεφτούμε την κατάσταση, θα γίνει σαφές ότι το ποσό πρέπει να προσαρμόζεται όχι μόνο κατά την προσθήκη μιας νέας αγοράς, αλλά επίσης και κατά τη διαγραφή και την επεξεργασία.

Θα πρότεινα σε μια τέτοια περίπτωση να δημιουργήσουμε μια συνάρτηση, ας την ονομάσουμε recountTotal, η οποία θα εκτελεί πλήρη επανυπολογισμό του ποσού. Δηλαδή, θα διασχίζει με βρόχο όλες τις αγορές και θα αθροίζει το περιεχόμενο της στήλης cost.

Έχοντας μια τέτοια συνάρτηση, θα μπορούμε να την καλούμε σε οποιοδήποτε σημείο, όπου προβλέπονται τυχόν αλλαγές στο συνολικό ποσό. Φυσικά, είναι λίγο μη βέλτιστο να υπολογίζουμε κάθε φορά το συνολικό ποσό. Ωστόσο, θα έχουμε σημαντική απλοποίηση του κώδικα.

Θα χρησιμοποιήσουμε την προτεινόμενη συνάρτηση κατά τη δημιουργία μιας νέας αγοράς:

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, 'διαγραφή', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // θα επανυπολογίσουμε το συνολικό ποσό
});

Εδώ είναι το πρόχειρο της περιγραφόμενης συνάρτησης:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// βρίσκουμε το άθροισμα και το γράφουμε στο #total
	}
}

Υλοποιήστε την συνάρτηση recountTotal που περιέγραψα.