[QUIZ] 상품 가격 계산 프로그램 2
29 Sep 2021 -
1 minute read
상품 가격 계산 프로그램 만들기 2
See the Pen 상품 가격 계산 프로그램 2 by Jinsol (@losuif) on CodePen.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 가격 계산 2</title>
<link rel="stylesheet" href="style/style.css">
<script src="script/script.js"></script>
</head>
<body>
<div id="wrap">
<h1>상품 가격 계산 2</h1>
<fieldset>
<label>
상품가격1 <input type="text" size="8" class="price" maxlength="6">
</label>
<label>
수량 <input type="text" size="3" class="qnty" maxlength="2">
</label>
</fieldset>
<fieldset>
<label>
상품가격2 <input type="text" size="8" class="price" maxlength="6">
</label>
<label>
수량 <input type="text" size="3" class="qnty" maxlength="2">
</label>
</fieldset>
<fieldset>
<button onclick="fnCalc()">확인</button>
</fieldset>
<fieldset>
총액 : <span id="res">0</span>
</fieldset>
</div>
<!-- div#wrap -->
</body>
</html>
css
@charset "UTF-8";
div#wrap {
width: 500px;
border: 1px solid #000;
padding: 20px;
margin: 20px auto
}
#wrap fieldset {
padding: 10px;
margin: 10px;
font-size: 18px;
font-weight: bold;
}
fieldset label input.price {
width: 120px;
}
fieldset label:first-child {
padding-right: 20px;
}
fieldset label input.qnty {
width: 50px;
}
fieldset button {
font-size: 16px;
}
fieldset:nth-child(3)~fieldset {
/* div#wrap 자식요소들 중 세번째(상품가격2 fieldset)
(first-child = h1)를 제외한 다음 fieldset부터
존재하는 모든 fieldset */
border: none;
padding: 0;
}
fieldset:last-child::after {
content: " 원";
margin-left: 10px;
}
javascript
function fnCalc(){
let domPrice = document.getElementsByClassName("price");
let len = domPrice.length;
let domCnt = document.getElementsByClassName("qnty");
let priceSum = 0;
for (let i = 0; i < len; i++) {
priceSum += (domPrice[i].value * domCnt[i].value);
}
document.querySelector("#res").innerText = priceSum;
}