JavaScript 배열 실습 문제 1

보기의 데이터를 배열로 받고 하나의 배열로 합친후, 찾을 문자열을 입력 한 후 버튼을 누르면 
alert를 통해 배열의 위치를 알려주고, 없으면 존재하지 않습니다를 출력하기

 

<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" placeholder="찾을 문자열을 입력하세요" size=100 id="text">
	
	<button onclick="arrayTest();"> 전송 및 처리 </button>
	
	<script>
    	function arrayTest(){
            
            const la1 = document.getElementById("la1").innerHTML.split(",");
            const la2 = document.getElementById("la2").innerHTML.split(",");
            const la3 = document.getElementById("la3").innerHTML.split(",");
            const la4 = document.getElementById("la4").innerHTML.split(",");
            
            const arr = la1.concat(la2,la3,la4);
            
            const text = document.getElementById("text").value;
            const index = arr.indexOf(text);
            
            if(index >= 0){
                alert(text + "는 배열 index " + index + "번째에 존재합니다." );
            }else{
                alert("존재하지 않습니다.");
            }


    	}   
    </script>

>> label안의 문자열을 split메소드로 문자열을 나눈 후  배열안에 담기 
     concat()을 이용해 배열을 하나로 합치고, indexOf()를 통해 입력한 값의 인덱스를 찾음

>>indext == -1 경우 : 입력한 값이 배열안에 존재하지 않음 ->   존재하지 않는다는 경고창 띄우기

 

 

---

보기

사과,바나나,당근
김밥,치즈,떡볶이,햄버거
환타,사이다,콜라
고양이,강아지