[JavaScript] 배열 | 제시되어 있는 값인(ex. 고양이)를 입력해도 "존재하지 않습니다."라는 문구가 출력된다.

 

문제점

제시되어 있는 값인(ex. 고양이)를 입력해도 "존재하지 않습니다."라는 문구가 출력됨.

 

나의 로직 

        1. 각각의 la1,la2,la3,la4를 ,를 구분자로 하여 나눈다
            1.1 la1을 split(",") 이용하여 쪼갠다.
        2. 나눈 조각 조각들을  하나의 배열에 담는다.
        3. 사용자에게서 value 값을 입력 받는다  
        4. 입력 받은 value 값과 하나의 배열을 조건 검사를 한다.  

        5. 조건식 
        5.1 -> 있다 -> 몇 번 인덱스에 있는지 alert 창에 알려주기 -> food + "는 배열 index " + i + "에 존재합니다."; 
            5.1.1 -> arr.indexOf(비교대상) => 인덱스 값을 반환해줌 
        5.2 -> 없다 -> 마찬가지로 alert 창에 -> "존재하지 않습니다." 문구 출력하기  => 성공

 

 

 

로직에서 구현하지 못한 부분들

4. 입력 받은 value 값과 하나의 배열을 조건 검사를 한다. 

5.1 -> 있다 -> 몇 번 인덱스에 있는지 alert 창에 알려주기 -> food + "는 배열 index " + i + "에 존재합니다."; 
5.1.1 -> arr.indexOf(비교대상) => 인덱스 값을 반환해줌

 

 

 

전체 코드

	 <fieldset>
        <legend>보기</legend>
        <label id="la1">사과, 바나나, 당근,</label> <br>
        <label id="la2">김밥, 치즈, 떡볶이, 햄버거,</label> <br>
        <label id="la3">환타, 사이다, 콜라,</label> <br>
        <label id="la4">고양이, 강아지</label> <br>
    </fieldset>
    <br>

    <input type="text" name="" id="enter" placeholder="찾을 문자열을 입력하세요" size="100"><br>
    <button onclick="test1()">전송 및 처리</button>
    <script>

        function test1(){

        var fruit = document.getElementById("la1");
        var food = document.getElementById("la2");
        var drink = document.getElementById("la3");
        var animal = document.getElementById("la4");

        // 하나의 배열
        var arr = fruit.concat(food);

        console.log(arr);
     
        // 사용자에게서 입력 받은 값
        var enter = document.getElementById("enter").value; 

        
        console.log(enter);

        var index = arr.indexOf(enter);

        
        if(index == -1){
            alert("존재하지 않습니다.")
        }
        else {
            for(var i=0;i<arr.length;i++){
            alert(enter + "는 배열 index" + arr[i] + "에 존재합니다.");
            } 
        }

  }

 

 

보완할 점

• 라벨 마지막에 , 제거하기
• 쉼표 마지막에 공백 제거하기 (, 강아지 < 결과값 찾을 수 없음 )
• var ___ = document.getElementById("__");로만 끝나는 것이 아니라 innerHTML.spilt(",");까지 붙여서 각각의 값들을 쪼개기 -> 나의 로직 1.1 
• concat 활용 시 연결하고자 하는 배열 모두 기술 가능하다.
• indexOf() 활용시 반복문을 사용하면,  *다음 사진과 같은 결과가 나오기 주의하기 

다음과 같이 얼렁뚱땅한 값이  마지막 인덱스까지 출력된다.

 

 

 

모범답안

정상적으로 문구가 출력되는 것을 확인 할 수 있다.

 

  <fieldset>
        <legend>보기</legend>
        <label id="la1">사과,바나나,당근</label> <br>
        <label id="la2">김밥,치즈,떡볶이,햄버거</label> <br>
        <label id="la3">환타,사이다,콜라</label> <br>
        <label id="la4">고양이,강아지</label> <br>
    </fieldset>
    <br>

    <input type="text" name="" id="enter" placeholder="찾을 문자열을 입력하세요" size="100"><br>
    <button onclick="test1()">전송 및 처리</button>
    <script>

        function test1(){

        var fruit = document.getElementById("la1").innerHTML.split(",");
        var food = document.getElementById("la2").innerHTML.split(",");
        var drink = document.getElementById("la3").innerHTML.split(",");
        var animal = document.getElementById("la4").innerHTML.split(",");

        // 하나의 배열
        var arr = fruit.concat(food,drink,animal);
        console.log(arr);
     
        // 사용자에게서 입력 받은 값
        var enter = document.getElementById("enter").value; 
        var index = arr.indexOf(enter);

        
        if(index >= 0){
            alert(enter + "는 배열 index" + index + "번째에 존재합니다.");
        }
        else {
            alert("존재하지 않습니다.")
        }

  }

 

 

---

칭찬하고 싶은 점

1.split, concat, indexOf 메소드 활용 해야겠다는 접근

2.예상 풀이 시간(20분)이 한참 넘었는데도, 끝까지 풀겠다는 마음 가짐 (총 소요시간 1시간)

3. 로직을 생각할 때, 텍스트로 정리해서 하나씩 풀어나간 것