YJ의 새벽

Java Script ( 요소 추가 제거 ) 본문

WebFront_/Java Script

Java Script ( 요소 추가 제거 )

YJDawn 2023. 3. 2. 20:31

 

 

 

 

 

<!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>Document</title>
    <style>
        /* 한 줄 */
        .row{
            margin: 5px 0;
            display: flex;
            align-items: center;
        }
        /* input 요소 */
        .in{
            width: 100px;
            margin-right: 5px;
        }
        /* x 버튼 */
        .remove{
            border: 1px solid black;
            border-radius: 50%;

            width: 18px;
            height: 18px;

            display: flex;
            justify-content: center;
            align-items: center;

            box-sizing: border-box;
            padding-bottom: 4px;

            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 첫 행은 무조건존재 (삭제 X) -->
        <div class="row">
            <input type="number" class="in">
        </div>

        <!-- 두번째 행 이후부터 삭제가능 -->
        <!-- 
            <div class="row">
            <input type="number" class="in">
            <span class="remove">&times;</span>
        </div> 
         -->
    </div>
    <button id="add">추가</button>
    <button id="calc">계산</button>


    <script src="/js/14_요소추가제거.js"></script>
</body>
</html>
// 추가버튼 클릭시 동작
document.getElementById("add").addEventListener("click",function(){
 
//<div class="row">
//    <input type="number" class="in">
//    <span class="remove">&times;</span>
//</div>  

        //div 요소 생성
    const div = document.createElement("div");    // <div> </div>
        //div에 row class 추가
    div.classList.add("row")                     //  <div class="row"> <div>

        //input 요소 생성
    const input = document.createElement("input");  // <input >
        //input에 in class 추가
    input.classList.add("in");                     // <input class="in">
        //input 에 type="number" 추가
    input.setAttribute("type","number");        // <input type="number" class="in">

    // 요소에 속성 추가하거나 변경할때 사용하는 함수
    // 요소. setAttribute("속성명","속성값");
    //  <-->  요소.removeAttribute("속성명")  : 속성제거

        //span 요소 생성
    const span = document.createElement("span");    // <span></span>
        //span 에 remove class 추가
    span.classList.add("remove");           // <span class="remove"></span>
        //span 에 &times;  추가
    span.innerHTML="&times;";        //  <span class="remove">&times;</span>




    //span에 click이벤트 동작 추가 (동적요소에 동적으로 이벤트 추가)
    span.addEventListener("click",function(){
        //alert("동적요소이벤트 추가!");

        //클릭된 X버튼의 부모요소를 삭제
        // 요소.remove()   : 해당 요소를 제거
        this.parentElement.remove();

    })
        // ---------------------
        // div > input , span 조립
    div.append(input, span);

        //.container에 div를 마지막자식으로 추가
    document.querySelector(".container").append(div);

    input.focus;
})



// 계산 버튼이 클릭되었을때
// input 요소에 작성된 값을 모두 얻어와 합한 후 출력
document.getElementById("calc").addEventListener("click",function(){

    // 함수는 호출된 시점의 HTML 화면을 기반으로해서 진행 !!
    const inputList = document.getElementsByClassName("in");

    let sum=0;
    for(let input of inputList){
       sum += Number(input.value)  //input 요소 작성된 값 누적
    }
    alert("합계 : "+sum);
})

 

 

 

Document

 

 

 

 

 

 

 

'WebFront_ > Java Script' 카테고리의 다른 글

Java Script ( 주소검색(카카오서비스))  (0) 2023.04.26
Java Script ( 함수 )  (0) 2023.03.02
Java Script ( 노드(Node), 요소(Element) 탐색 )  (0) 2023.03.02
Java Script ( 객체, JSON )  (0) 2023.03.02
Java Script ( window 내장객체 , 팝업창 )  (0) 2023.02.28
'WebFront_/Java Script' Related Articles more
Comments