상품 수량 계산기 두번째

  • 쇼핑몰에 보면 상품 수량 계산하는건 꼭 있다.
  • HTML,CSS,JS로 간단하게 구현이 가능하다.
  • codepen으로도 올려놓았으니 확인해보고 입맛대로 바꿔서 쓰면 되겠다.
  • 상세 코드도 따로 올려놓았으니 확인
  • 크롬브라우저에 맞춘거라 codepen에서는 0.5x를 클릭하여 보면 된다.





See the Pen 상품 가격 계산기 2 by yoonbitnara (@yoonbitnara) on CodePen.




상세코드

HTML

<!DOCTYPE html>
<html lang="en">
<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">
</head>
<body>
    <div id="wrap">
        <h1>상품 계산기</h1>

        <fieldset>
            <label> 상품가격1
                <input type="text" size="8" maxlength="6" class="price">
            </label>
            <label> 수량
                <input type="text" size="3" maxlength="2" class="cnt">
            </label>
        </fieldset>

        <fieldset>
            <label> 상품가격2
                <input type="text" size="8" maxlength="6" class="price">
            </label>
            <label> 수량
                <input type="text" size="3" maxlength="2" class="cnt">
            </label>
        </fieldset>

        <fieldset>
            <button type="button" onclick="fnCalc()">확인</button>
        </fieldset>

        <fieldset>
            총액 : &nbsp;
            <span id="res">0</span>
        </fieldset>
    </div>
<script src="script/script.js"></script>
</body>
</html>



CSS

@charset "UTF-8";

div#wrap {

    width: 600px;
    padding: 10px;
    border: 1px solid #000;
    margin: 20px auto;
}

fieldset {

    padding: 20px;
    margin-bottom: 10px;
    display: flex;
}

label, input, button {

    font-size: 24px;

}

label:first-child {

    width: 320px;
    /* border: 1px solid #000; */
}

fieldset:nth-child(3)~fieldset {
    /* div#wrap 자식요소들 중에서 셋째 fieldset 을 제외한 다음 fieldset
    부터 존재하는 모든 fieldset 선택*/
    padding: 0;
    border: none;
    font-size: 30px;
}

fieldset:last-child::after {

    content: "원";
    margin-left: 10px;
}



JS

function fnCalc() {

    let domPrice = document.getElementsByClassName("price");
    let len = domPrice.length;

    console.log("domPrice : " + typeof(domPrice));
    // 현재 마크업에서는 class="price"가 모두 2개 있음
    // 자동으로 배열로 처리되며 인덱스 번호 0, 1으로 세팅됨.

    let domCnt = document.getElementsByClassName("cnt");
    let priceSum = 0;

    console.log("domCnt : " + typeof(domCnt));

    for (let i = 0; i < len; i++) {
        priceSum += (domPrice[i].value * domCnt[i].value);
        console.log("domPrice[i].value : " + typeof(domPrice[i].value));
        console.log("domCnt[i].value : " + typeof(domCnt[i].value));
        
    }
    document.getElementById('res').innerText = priceSum;
}

let sum = 0;

let il = "3";
let il2 = "2";

sum += il*il2

console.log(sum);



Leave a comment