여행준비물 점검 배열써서 하기

<!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>
    <script src="js/travel.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #wrap {
            display: grid;
            grid-template-rows: 100px 50px 300px;
            justify-content: center;
            align-items: center;
            
        }
        ul, li, ol {
            list-style: none;
        }
        #div2 {
            justify-self: center;
            
        }
        #div3 {
            align-self: start;
        }
    </style>
</head>
<body>
    <!-- x를 누르면 사라지고 추가를 누르면 나오고 -->
    <div id="wrap">
        <div>
            <h1>여행준비물 점검 목록</h1>
        </div>
        <div id="div2">
            <input id="input" type="text" name="txt" value="">
            <button id="button">추가</button>
        </div>
        <div id="div3">
            <ul id="ul">

            </ul>
        </div>
    </div>
</body>
</html>

// let arr = ['aaa','bbb','ccc'];
// arr.push('ddd');
// document.write(arr+"<br>");  //aaa bbb ccc ddd
// arr.splice(1,1);
// document.write(arr+"<br>");   // aaa ccc ddd
window.onload = function () {
    let input = document.querySelector("#input");
    let button = document.getElementById("button");
    let ul = document.getElementById("ul");

    button.addEventListener("click", btn);



    let arr = [];

    function btn() {
        if (!input.value) {
            //자바스크립트 자료형에서 false로 반환되는 값은
            //"", null, undefined, 0, NaN 나머지는 true라 한다
            alert("공백입력 불가능");
        } else {
            arr.push(input.value);
            input.value = ""; //입력하고 공백 만들어주기

            showList();

            let button2 = document.querySelectorAll(".item");
            for (let i = 0; i < button2.length; i++) {
                button2[i].addEventListener("click", del);
            }
        }
    };

    //1번방법!!
    function showList() {
        let string = "";
        // ul.innerHTML = "";
        for (let i = 0; i < arr.length; i++) {
            string += "<li data-idx =" + i + ">" + arr[i] + "<button class='item' id='btn2'>X</button></li>";
            // ul.innerHTML += "<li class='item' id='it" + i + "'>" + arr[i] + "<button id='btn2'>X</button></li>";
        }
        ul.innerHTML = string;
    }

    //2번방법!!
    // function showList() { 
    //     ul.innerHTML = "";
    //     for (let i = 0; i < arr.length; i++) {
    //         ul.innerHTML += "<li class='item' id='it" + i + "'>" + arr[i] + "<button id='btn2'>X</button></li>";
    //     }
    // }

    function del() {
        // this =자기자신
        let index = this.getAttribute("data-idx");
        arr.splice(index, 1);
        showList();

        //여기도 써줘야한다
        let button2 = document.querySelectorAll(".item");
        for (let i = 0; i < button2.length; i++) {
            button2[i].addEventListener("click", del);
        }
    };



};

x버튼으로 삭제하면~

저작자표시 비영리 변경금지 (새창열림)

'Javascript > 연습' 카테고리의 다른 글

event.preventDefault() +버블링 + form + parentElement로 데이터 넘기고 삭제 (0)	2023.06.02
가격 할인율 보여주깅 (0)	2023.06.01
계산기 event.target써서 버블링으로 해보기 (0)	2023.06.01
계산기 ㅇㅅㅇ버블링 사용 전 노가다로 하기 (0)	2023.06.01
d-day (0)	2023.05.31