[QUIZ] 상품 가격 계산 프로그램 2


상품 가격 계산 프로그램 만들기 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;
}

Categories:

Javascript