디지털 컨버전스/Java Script

[Javascript] splice 예제

gimyeondong 2020. 4. 14. 10:38 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <fieldset>
            <legend>Fruits</legend>
            <div id="screen"></div>
        </fieldset>
        <input id="txt1" type="text" placeholder="추가할 단어를 입력하세요">
        <input id="add" type="button" value="추가하기">

        <br>
        <input id="txt2" type="text" placeholder="삭제할 단어를 입력하세요">
        <input id="del" type="button" value="삭제하기">


        <script>
            var arr = ["Apple"];
            document.getElementById("screen").innerHTML	 = arr;

            document.getElementById("add").onclick	 = function(){
                var addName = document.getElementById("txt1").value;
                console.log(addName);
                arr.splice(arr.length,0,addName);
                document.getElementById("screen").innerHTML	 = arr;

            };

            document.getElementById("del").onclick	 = function(){
                var delName = document.getElementById("txt2").value
                console.log(delName);
                var delIndex = arr.indexOf(delName);
                //맞는 인덱스 없으면 -1 반환
                //splice 시작 위치가 -1 이면 뒤에서 삭제

                if(delIndex != '-1'){
                    console.log(delIndex);
                    arr.splice(delIndex,1);
                    document.getElementById("screen").innerHTML	 = arr;
                }else{
                    document.getElementById("txt2").value = '해당하는 과일이 없습니다.'
                }
            };


        </script>
    </body>
</html>