-/+버튼 클릭시 수량, 금액 변경

안녕하세요! 오늘은 쇼핑몰에서 수량버튼을 눌렀을 때 수량과 금액이 바뀌는 과정을 알아보겠습니다.😉

제가 헤드셋 쇼핑몰을 만들었던 코드로 리뷰를 해보겠습니다.

수량<input type="button" value=" - " onclick="del();">// - 버튼, 클릭시 del 실행
					
<input type="hidden" name="sell_price" style="width:30px;" value="${dto.p_price}" >
<input type="text" name="amounts" value="1" size="3">// 기본 수량 1로 설정
<input type="button" value=" + " onclick="add();">// +버튼, 클릭시 add 실행
<input type="hidden" name="sum" size="11" readonly>
<div>금액 :<span id="my_sum">
  <fmt:formatNumber value="${dto.p_price}" pattern="#,###" /></span>원</div>	//총 금액
<input type="hidden" name="m_id" id="m_id" value="${sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal.username}">

function add() {
		hm = document.form1.amounts;// name이 amounts인 요소
		sell_price = document.form1.sell_price;// name이 sell_price인 요소
		hm.value++;// hm 값을 1 증가
		var sum_ = parseInt(hm.value) * sell_price.value;// hm 문자값을 정수로 변환 * sell_price	해서 금액 계산
		document.getElementById("my_sum").innerHTML = sum_.toLocaleString('ko-KR');// id가 my_sum인 요소를 찾아 값을 위에서 계산한 sum_ 값으로 설정, 각 나라 표시방식에 맞게 설정해줌
	}

	function del() {
		hm = document.form1.amounts;
		sell_price = document.form1.sell_price;
		if (hm.value > 1) {// hm(amounts에서 가져온 값)가 1보다 크면
			hm.value--;// hm 값 1 감소
			var sum_ = parseInt(hm.value) * sell_price.value;
			document.getElementById("my_sum").innerHTML = sum_.toLocaleString('ko-KR');		
		}
	}

수량버튼(+) 버튼 클릭

클릭 후 수량 변경

버튼을 클릭하면 수량과 금액이 변경되는 것을 볼 수 있습니다.👍