JS/[문제]

[국비][문제] 버튼 생성 및 이벤트 위임 구현

줌인. 2024. 5. 26. 14:41

[문제1]

- div id="result" 사이에 div와 button 태그를 생성

- 스크립트를 완성하세요

<body>
    <div id="result">
        <!--div사이에 button 만들고, button에 클릭 이벤트 넣기 : 여기 생성-->

    </div>  
    <button>CLICK</button>

    <button title="btn1">BTN1</button>
    <button title="btn2">BTN2</button>
    <button title="btn3">BTN3</button>

    <script>
    </script>
</body>

 

[코드 완성 예시]

더보기
    <script>
        const clicker = document.getElementById("clicker");

        clicker.addEventListener("click", function() {
            let div = document.createElement("div");
            let b = document.createElement("button");
            b.append("newClick");
            div.append(b);
            result.append(div);
            //이름 추가
            b.className = "newClick";
        })

        //newClick에 버튼 달기 --> div아래에 div들어가기 때문에 이벤트 위임
        //div박스말고 특정 요소 클릭했을떄 그러고 싶은 것
        const newClick = document.getElementsByClassName("newClick");
        result.addEventListener("click", function(e){
            //console.log("new Click입니다.")
            if(e.target.classList.contains("newClick")) { //classList 중에 고른 것
                console.log("new Click 버튼을 클릭하셨습니다.");
            }
        })
    </script>

 

① 엘리먼트 생성 및 부모, 자식 구조화

 

② 새로 생성되었을 때, event가 구현되지 않는 점 인지 ⇒ 이벤트 위임 실행

 

③ 매개변수에 e를 넣어서 이벤트 특성에 접근

 

④ 특정 target, 버튼을 클릭할 수 있도록 영역 구분

 

 

[문제2]

- 상위 체크박스 누를 시, 전체 선택 및 해제가 가능하게 구현

- 체크박스 5개중 1개 해제시, 전체 선택 해제 구현

- 체크한 것만 삭제할 수 있도록 구현

- 스크립트를 구현하세요

<body>
    <div>
        <input type="checkbox">
        <button id="btn">DELETE</button>
    </div>

    <div id="result1">
        <input type="checkbox">
        <span>mail title1</span>
    </div>

    <div id="result2">
        <input type="checkbox" >
        <span>mail title2</span>
    </div>

    <div id="result3">
        <input type="checkbox">
        <span>mail title3</span>
    </div>

    <div id="result4">
        <input type="checkbox">
        <span>mail title4</span>
    </div>

    <div id="result5">
        <input type="checkbox">
        <span>mail title5</span>
    </div>

    <script>


    </script>
</body>

 

[코드 완성 예시]

더보기
    <script>
        const checkAll = document.getElementById("checkAll");
        const c1 = document.getElementsByClassName("c1");
        const btn = document.getElementById("btn");
       
        //체크된 부분 메일 지우기
            btn.addEventListener("click", function(){
                let ar = [];
                for(let j=0; j<c1.length;j++) {
                    if(c1[j].checked) {
                        ar.push(c1[j].getAttribute("data-del-num"))
                    }
                }
                for(let j=0; j<ar.length;j++) {
                    document.getElementById(ar[j]).remove();
                }
            })  

        //↓복습 파트↓
        //하나 체크 해제 시 모두 해제
        for (let i=0; i<c1.length;i++) {
            c1[i].addEventListener("click", function(){
            //별도로 보기
            let flag = true;
            for(let j=0; j<c1.length;j++) {
                if(!c1[j].checked){
                    flag = false;
                    break;
                }
            }
            checkAll.checked = flag;
            })
        }

        //모두 체크 & 모두 해제
        checkAll.addEventListener("click", function() {
            for(let i=0;i<c1.length;i++) {
                if(checkAll.checked) {
                    c1[i].checked = true;  
                } else {
                    c1[i].checked = false;
                }
            }
        })

    </script>

 

① 어떤 것을 삭제할 것인지 판단

 

② 배열에 어떤 것을 담을 것이며, 그 배열을 어떻게 활용할 것인지 판단

 

③ 생성된 배열에 어떻게 넣을 것인지 고민 ⇒ ar.push()

 

④ attribute는 ID와 class와 다른게 선언자를 기반으로 값을 가져오는 것임을 유의할 것

    ※ 참고 : https://zoooom-in.tistory.com/95

 

⑤ 자식요소를 기반으로 부모요소를 삭제하기 위해선 부모의 아이디와 자식의 속성명을 동일하게 할 것

    ⇒ 속성명을 기반으로 부모 아이디를 찾음

    ⇒ 따라서 부모의 요소를 제거

 

⑥ 정의되지 않은 속성명을 추가하기 위해선 data-*로 속성명 생성

 

※ 참고 문제(체크박스 동기화 문제_문제6) : https://zoooom-in.tistory.com/92

 

[국비][문제] 타이머 설정, 이미지 슬라이더, 숫자 증감 및 음수 방지, 문자열 누적, 체크 박스 동

[문제 1]- prompt에 '분', '초'를 입력받아서 원하는 시간까지 돌릴 수 있도록 설정한다.- 만약 값을 나가지 않는다면 59분 59초를 Max로 한다.- script를 완성하세요    script>        let minutes = 59;     

zoooom-in.tistory.com

 

 

728x90

'JS > [문제]' 카테고리의 다른 글

[국비][문제] 타이머 설정, 이미지 슬라이더, 숫자 증감 및 음수 방지, 문자열 누적, 체크 박스 동기화 문제  (0) 2024.05.22

'JS/[문제]'의 다른글

  • 현재글[국비][문제] 버튼 생성 및 이벤트 위임 구현

관련글

티스토리툴바