Tổng số tiền trong máy tính sản phẩm bằng JavaScript

Bây giờ hãy làm sao để dưới bảng hiển thị tổng số tiền mua sắm. Ở đây có những điểm cần lưu ý.

Nếu suy nghĩ kỹ về tình huống, sẽ thấy rõ rằng tổng số tiền cần được điều chỉnh không chỉ khi thêm một mục mua sắm mới, mà còn cả khi xóa và khi chỉnh sửa.

Trong trường hợp như vậy, tôi đề xuất tạo một hàm nào đó, hãy gọi nó là recountTotal, hàm này sẽ thực hiện tính toán lại toàn bộ tổng số tiền. Nghĩa là nó sẽ lặp qua tất cả các mục mua sắm và tính tổng nội dung của cột cost của chúng.

Có hàm như vậy, chúng ta có thể gọi nó ở bất kỳ đâu mà dự kiến sẽ có sự thay đổi nào đó về tổng số tiền. Tất nhiên, có một chút không tối ưu khi mỗi lần đều tính lại tổng số tiền. Nhưng đổi lại chúng ta sẽ có được sự đơn giản hóa đáng kể về mã.

Hãy sử dụng hàm được đề xuất khi tạo mục mua sắm mới:

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, 'xóa', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // tính lại tổng số tiền
});

Đây là bản phác thảo của hàm được mô tả:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// tìm tổng số tiền và ghi nó vào #total
	}
}

Hãy triển khai hàm recountTotal mà tôi đã mô tả.