[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의 개념도 이해했다.