html 요소 이벤트 - form 실습

1.
계산이라는 버튼 클릭 시 n1값과 n2값을 합하여 nSum에 적용하라.

<form name="shopPrice">
    <input type="number" name="n1">+
    <input type="number" name="n2">=
    <input type="number" name="nSum" readonly="readonly">
    <button type="button">계산</button>
</form>

2.
계산이라는 버튼을 아래의 체크박스의 체크된 대상의 가격을 합산하여 sSum에 결과값을 출력하여라.

<form name="sPrice">
	<input type="checkbox" name="com" value="5000"> 컴퓨터 부품 : 5000
    <input type="checkbox" name="com" value="4000"> 컴퓨터 부품 : 4000
    <input type="checkbox" name="com" value="3000"> 컴퓨터 부품 : 3000
    <input type="checkbox" name="com" value="2000"> 컴퓨터 부품 : 2000
    <input type="checkbox" name="com" value="1000"> 컴퓨터 부품 : 1000
    <input type="number" name="sSum" readonly="readonly">
    <button type="button">계산</button>
</form>

3.
옵션 및 수량 변경 시 총 가격, 부가가치세, 총 결제금액을 계산하여 해당 영역에 출력하여라.

<form name="goodsView">
	<input type="text" name="goodsPrice" value="10000" readonly>
	<select name="goodsOption">
		<option value="0">:: 옵션없음 ::</option>
		<option value="1000">추가 A Type : 1000</option>
		<option value="2000">추가 B Type : 2000</option>
		<option value="3000">추가 C Type : 3000</option>
	</select>
	<select name="goodNum">
		<option value="1"> 1개 </option>
		<option value="5"> 5개 </option>
		<option value="10"> 10개 </option>
		<option value="15"> 15개 </option>
	</select>
	총 가격 :<input type="text" name="totalPrice" value="0" readonly>
	부가가치세 :<input type="text" name="totalVat" value="0" readonly>
	총 결제금액 :<input type="text" name="PaymentPrice" value="0" readonly>
</form>

 

1. 답

<form name="shopPrice">
    <input type="number" name="n1">+
    <input type="number" name="n2">=
    <input type="number" name="nSum" readonly="readonly">
    <button type="button" onclick="shopPriceSum()">계산</button>
</form>
<script type="text/javascript">
	function shopPriceSum(){
		var n1=Number(shopPrice.n1.value);
		var n2=Number(shopPrice.n2.value);
		shopPrice.nSum.value=n1+n2;
	}
</script>

2. 답

<form name="sPrice">
	<input type="checkbox" name="com" value="5000"> 컴퓨터 부품 : 5000 <br/>
    <input type="checkbox" name="com" value="4000"> 컴퓨터 부품 : 4000 <br/>
    <input type="checkbox" name="com" value="3000"> 컴퓨터 부품 : 3000 <br/>
    <input type="checkbox" name="com" value="2000"> 컴퓨터 부품 : 2000 <br/>
    <input type="checkbox" name="com" value="1000"> 컴퓨터 부품 : 1000 <br/>
    <input type="number" name="sSum" readonly="readonly">
    <button type="button" onclick="sSumPrice()">계산</button>
</form>
<script type="text/javascript">
	function sSumPrice(){
		var com=sPrice.com;
		var sum=0;
		for(var i=0;i<com.length;i++){
			if(com[i].checked){
				sum+=Number(com[i].value);
			}
		}
		sPrice.sSum.value=sum;
	}
</script>

3. 답

<form name="goodsView">
	<input type="text" name="goodsPrice" value="10000" readonly><br>
	<select name="goodsOption" onchange="goodsPriceSum()">
		<option value="0">:: 옵션없음 ::</option>
		<option value="1000">추가 A Type : 1000</option>
		<option value="2000">추가 B Type : 2000</option>
		<option value="3000">추가 C Type : 3000</option>
	</select><br>
	<select name="goodsNum" onchange="goodsPriceSum()">
		<option value="1"> 1개 </option>
		<option value="5"> 5개 </option>
		<option value="10"> 10개 </option>
		<option value="15"> 15개 </option>
	</select><br>
	총 가격 :<input type="text" name="totalPrice" value="0" readonly><br>
	부가가치세 :<input type="text" name="totalVat" value="0" readonly><br>
	총 결제금액 :<input type="text" name="PaymentPrice" value="0" readonly>
</form>
<script type="text/javascript">
	function goodsPriceSum(){
		var price=Number(goodsView.goodsPrice.value);
        var option=Number(goodsView.goodsOption.value);
		var num=Number(goodsView.goodsNum.value);
	
		var total=(price+option)*num;
		var vat=total*0.1;

		goodsView.totalPrice.value=total;
		goodsView.totalVat.value=vat;
		goodsView.PaymentPrice.value=total+vat;
	}
</script>