[QUIZ] 복합대입연산자를 사용한 누적 연결


복합대입연산자를 사용한 요소의 누적 연결



See the Pen 복합대입연산자를 사용한 누적 연결 by Jinsol (@losuif) 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>요소의 누적 연결</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="wrap">
        <h1>요소의 누적 연결</h1>
        
        <div id="ins">
            <!-- 요소 추가 실행 -->
            <span>요소 추가</span>
            <span onclick="fnTagAdd()"> + </span>
        </div>
        <!-- div#ins -->
        
        <div id="res">
            <!-- 추가된 요소 결과 보기 -->
        </div>
        <!-- div#res -->
        
    </div>
    <!-- div#wrap -->
    
    <script src="script.js"></script>
</body>
</html>



css

@charset "UTF-8";

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

#ins {
    width: 200px;
    text-align: center;
    font-size: 24px;
    padding: 10px;
    border: 1px solid #000;
}

#ins span:last-child {
    width: 30px;
    height: 30px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000;
    display: inline-block;
    line-height: 24px;
    cursor: pointer;

    user-select: none;
    /* 영역 선택 안됨 */
}

#ins span:last-child:hover {
    text-shadow: 1px 1px rgba(68, 68, 68, 0.5);
}

#ins span:last-child:active {
    border: 2px solid #444;
}

#res {
    border: 1px solid #000;
    padding: 40px;
    margin: 20px auto;
    height: 200px;
}

#wrap div.opt {
    font-size: 20px;
    border-top: 1px solid #aaa;
    border-bottom: 2px solid #888;
    background-color: #eee;
    padding: 10px;
    margin-bottom: 5px;
    position: relative;
}

#wrap div.opt span {
    position: absolute;
    right: 60px
}

#wrap div.opt span::after {
    content: "원";
}



javascript

let tagStack = "";
// 전역변수로 만들면 내용이 제거되지 않고 유지됨
// > 결과적으로 누적

let opt = 0;

function fnTagAdd(){

    opt++;

    let tagContent = "<div class='opt'>옵션" + opt 
                    + "<span class='price'>3000</span></div>";

    if(opt <= 4){
        tagStack += tagContent;
        let res = document.querySelector("#res");
        res.innerHTML = tagStack;
    }
}

Categories:

Javascript