[JavaScript] 사용자가 입력한 문자열을 배열에서 삭제하기

 

문제점

사용자가 입력한 문자열을 배열에서 삭제할 수 없다. 

 

나의 코드

    <script>

        var data = ["피자","치킨","당근","햄버거","떡볶이"];

        console.log(data);

        function test2(){

            var input = document.getElementById("input") 
            var del = document.getElementById("del"); 
            var index = del.indexOf(data);
            data.push(input.value);

            if(index>=0){
                for(var i=0;i<data.length;i++){
                    data.splice(i,1);
                }
            }


            console.log(data);


        }
    </script>

 

 

    나의 로직
    1. 추가 : 배열실습문제3번처럼 push()를 활용하여 추가하면 될 것 같다
        1.1 배열을 선언한다
        1.2 input 요소 객체를 담을 변수를 셋팅하고
        1.2 그 배열에 push()를 사용해서 값들을 담는다.
    2. 삭제 : 
        ?  : indexOf로 담긴 값들의 인덱스를 몇 번째 인덱스인지 구한다
        ?  : 그 값들을 splice(시작,제거)로 삭제한다
        ?  : 조건식을 이용해서 '당근'과 일치하는 인덱스를 삭제한다.
                => if문으로 먼저 조건검사를 한 뒤에 반복문으로 사용자가 입력한 값과, 배열의 값을 비교해보자.

 

---

코드 리모델링

 

기존 코드

*script단

        var data = ["피자","치킨","당근","햄버거","떡볶이"];

수정 코드

*html단

   <fieldset>
        <legend>보기</legend>
        <label id="food">피자 치킨 당근 햄버거 떡볶이</label>  
    </fieldset>
 

 

그리고 그 값들을 ' '을 구분자로하여 쪼개서 arr변수에 담는다. (== 그럼 자동으로 배열로 바뀐다)

   var arr = document.getElementById("food").innerHTML.split(' ');

 

---

* 제일 핵심 ! * 사용자가 입력한 값을 지우는 방법 

 

기존 코드

    function test2(){

            var input = document.getElementById("input") 
            var del = document.getElementById("del"); 
            var index = del.indexOf(data);
            data.push(input.value);

            if(index>=0){
                for(var i=0;i<data.length;i++){
                    data.splice(i,1);
                }
            }


            console.log(data);


        }

 

*splice(시작, 제거 수[, 추가값)] : 배열의 요소 추출해서 제거 및 추가 

 

수정 코드

        function test2(){

            var arr = document.getElementById("food").innerHTML.split(' ');
            
            var del = document.getElementById("del").value;
            var input = document.getElementById("input").value;
            

                for(var i=0;i<arr.length;i++){
                    if(arr[i]==del){
                        arr.splice(i,1);
                    }
                }
                
            arr.push(input);

    

        }
    </script>

input요소에 담긴 값 (== 사용자가 입력할 삭제할 값)을 del이라는 변수로 생성한다, input이라는 변수도 마찬가지이다. 

그러니까 del에는 우리가 지워야할 "당근"이라는 문자열이, input에는 추가할 "타코야끼"라는 문자열이 들어있는 셈이다.

이때는 input 요소 그 자체가 담긴 것이 아니라 input요소 안에 담긴 "그 값"이 담겨있다. ( 이부분이 이해가 안간다면 conlose.log로 찍어보길 바란다 ) 

 

이때, 반복문을 이용해서 먼저 배열에 담긴 값들을 쫙 조건 검사를 해준다. 만약 arr[i]번째 인덱스에 담긴 값이 del(사용자가 입력한 삭제하고자하는 문자열)과 동일할 경우, splice(i,1) 를 진행한다. (==  i번째 인덱스에서부터 1개를 삭제하겠다는 뜻 )

 

 

이상 없이 잘 출력된다.

 

 

수정된 전체 코드

  <fieldset>
        <legend>보기</legend>
        <label id="food">피자 치킨 당근 햄버거 떡볶이</label>
    </fieldset>
    <br>

    <input type="text" id="del" placeholder="삭제할 음식을 입력하세요"> <input type="text" id ="input"placeholder="추가할 음식이름을 입력하세요" size="25">
    <br><br>
    <div style="border: 1px solid red; width:500px; height:20px;" id="print">이 부분에 정답이 출력 될 수 있도록 하세요</div> 
    <br>
    <button onclick="test2();">처리 및 출력</button>

    <script>


        function test2(){

            var arr = document.getElementById("food").innerHTML.split(' ');
            
            var del = document.getElementById("del").value;
            var input = document.getElementById("input").value;
            

                for(var i=0;i<arr.length;i++){
                    if(arr[i]==del){
                        arr.splice(i,1);
                    }
                }
                
            arr.push(input);

            document.getElementById("print").innerHTML = arr.join(" ");
    

        }
    </script>

 

 

이상 없이 잘 출력된다.

---

 

보완할 점

* 값을 뿌려주는 div단에 id는 반드시 설정하자 (이건 기본 중의 기본이다)

* 사용자가 입력한 문자열을 찾을 때는 반복문을 먼저 돌리고, 그 안에 조건문을 중첩하자. 

* label의 담긴 값을 활용하자! ( 굳이 새로운 배열을 생성할 필요가 없다는 뜻 ) == 이 값들은 .innerHTML.split(구분자) 로 배열에 담을 수 있다. 

 

 

칭찬하고 싶은 점

* push()를 사용해서 사용자가 입력한 input 요소 객체에 담긴 값을 배열에 담으려고 했다

* splict(i,1) < 이 접근도 아주아주아주 큰 칭찬을 하고 싶다. (해당 메소드를 이용하면, i번째 인덱스에 해당하는 값 1개를 삭제할 수 있다) 

* input 요소 객체와 그 값들에 대한 개념을 완벽하게 이해했다.

* 나아가 innerHTML의 개념도 이해했다.