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 함수를 구현해 보세요.