[shop]상품 상세페이지 총가격 구현하기

수량 변경했을 때 총가격도 변경 되도록 구현하고자 한다.

 

1. html

<div>
	가격 : <span th:text="${#numbers.formatCurrency(item.itemPrice)}" 
    		id="itemPriceSpan" th:data-item-price ="${item.itemPrice}"></span> won
</div>

<div>
    수량 : <input type="number" min="1" value="1" name="cartAmount" id="cartAmount">
	<!-- 아이템코드 --><input type="hidden" name="itemCode" th:value="${item.itemCode}" 
				id="itemCode">
</div>

<div>
	총 가격 : <span th:text="${#numbers.formatCurrency(item.itemPrice)}"
    		id="totalPriceSpan"></span> won
</div>

2. js

const cartAmountInput = document.querySelector('#cartAmount');
	
	cartAmountInput.addEventListener('change', function(){
		
		const itemPrice = document.querySelector('#itemPriceSpan').dataset.itemPrice;
		
		const cartAmount = document.querySelector('#cartAmount').value;
		
		const result = itemPrice * cartAmount;
		
		document.querySelector('#totalPriceSpan').innerText = '￦' + result.toLocaleString();
		
	})