[shop]상품 상세페이지(이미지 두장 넣기, 총 가격 변경(script 이벤트 사용))

<예시화면 사진 출처: 예스24>

우리는 한 아이템당 사진 두장씩을 올리도록 설정해두었다.

그래서 사진이외의 다른 자료는 [0], [1] 둘 중 하나 선택해도 같은 값이 나온다

 

1. 상세페이지 jsp

<div class="itemDetail-container"> 
<div class="firstDiv"> 
<div>
<c:forEach var="itemViewDTO" items="${item }">
<c:if test="${itemViewDTO.isMain eq 'Y'}">
<img src="images/${itemViewDTO.attachedName }"  width="350px" height="420px">
</c:if>
</c:forEach>
</div>

<div>
<form action="insertCart.ca" method="post">
form태그로 자료 넘길 때 itemCode가 필요하여 히든으로 가져간다  -->
<input type="hidden" name="itemCode" value="${item[0].itemCode}">
<div>${item[0].itemName}</div>



(★ 총가격을 구하기 위해서는 가격정보가 필요한데 div 전체행을 선택하면 

가격 : 15000원 이렇게 표시되기 때문에 딱 가격만 가져올 수 있도록

 필요한 영역만 span 태그를 사용 지정한다!)
<div>가격 : <span id="priceSpan">${item[0].itemPrice }</span>원 (구매 금액 1% 적립)</div>

<div>수량 : <input type="number" min="1" value="1" name="putCnt"></div>

<div>총 가격 : <span id="totalPriceSpan">${item[0].itemPrice}</span>원</div>

<div align="left">
<input type="button" value="구매하기">
<a href="cartList.ca">
<input type="submit" value="장바구니">
</a>
</div>
</form>
</div>
</div>
<div class="secondDiv"> ${item[0].itemComment}</div>

<div class="thirdDiv" align="center">
<c:forEach var="itemViewDTO" items="${item }">
<c:if test="${itemViewDTO.isMain eq 'N' }">
<img src="images/${itemViewDTO.attachedName }">
</c:if>
</c:forEach>
</div>
</div>

 

 

2. 총가격 변경 script 설정하기

 

<script type="text/javascript">

우리는 수량 input태그의 값이 변경되는 이벤트가 발생했을 때 총 가격정보를 변경하도록 만들것이다.

 
const putCntInput = document.querySelector('input[type="number"]');

이벤트 추가 (값 바뀔 때 마다 -> change)
putCntInput.addEventListener('change', function(){
1. 총 가격을 변경시키자(가격*수량) 



1) 가격정보 가져온다 
const price = document.querySelector('#priceSpan').innerText;
id로 정한것 css처럼 #을 사용하여 가져옴

2) 수량정보 가져온다 
const cnt = document.querySelector('input[type="number"]').value;

3) 가격 * 수량 
const result = price * cnt;

4) 총가격 값을 바꾼다 
document.querySelector('#totalPriceSpan').innerText = result;

});

putCntInput.addEventListener('keyup', function(){
총 가격을 변경시키자(가격*수량) 



1) 가격정보 가져온다 
const price = document.querySelector('#priceSpan').innerText;

2) 수량정보 가져온다 
const cnt = document.querySelector('input[type="number"]').value;

3) 가격 * 수량 
const result = price * cnt;

4) 총가격 값을 바꾼다 
document.querySelector('#totalPriceSpan').innerText = result;

});

</script>

 

click – 클릭했을 때 이벤트 발생 
 dbclick – 더블클릭했을 때 이벤트 발생
 mousedown – 마우스를 눌렀을 때 발생
 mouseenter – 마우스가 진입했을 때
 mouseleave – 마우스가 노드 영역을 벗어났을 때
 mousemove – 마우스가 움직였을 때
 hover – 마우스가 노드에 들어오거나 벗어날 때
 change – 노드의 값이 변경되었을 때
 focus – 노드가 포커스를 획득했을 때
 keydown – 키보드를 눌렀을 때
 keypress – 키보드를 계솟 누르고 있을 때
 keyup – 키보드를 눌렀다가 떼었을 때