ยอดรวมทั้งหมดในเครื่องคิดเลขสินค้าบน 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 ตามที่ผมอธิบายไว้ให้สมบูรณ์