2024-08-22 :: 022 Java Script 활용 ①

 

 

자바 스크립트를 이용하여 나만의 여행 준비물 리스트 목록을 만들어 보았다.

생각보다 막히는 부분이 많아서 고생을 좀 했지만...

아래는 자바스크립트만 해석하고 기록해보겠다. (CSS는 사용자의 입맛에 따라 꾸미면 되므로...)

 

<div id="warp">       <h1>여행 준비물 점검 목록</h1> //제목이다, JS에서 건드는 건 없다.       <form action="#">         <input type="text" id="item" placeholder="준비물을 입력해주세요.">         <button id="add">추가</button>       </form>       <div id="itemList">         아무 준비도 하지 않으셨군요...       </div> </div>

 

붉게 표시한 부분이 자바스크립트에서 불러와 수정을 해 줄 항목들이다.

 

let itemList = [];     //입력된 준비물을 받을 배열 선언     let addBut = document.querySelector('#add')     //HTML 버튼 불러오기     addBut.addEventListener("click", addList)     //HTML 버튼에 기능 할당하기     function addList(){       let item = document.querySelector('#item').value       //input의 내용의 값을 가져옴       let input_item = item.trim();       //trim - 가져온 값의 시작과 끝에 있는 공백을 없애줌 (문자열이 있는 경우 중간 공백은 건들지 않음)       //item값이 공백 또는 아무것도 입력이 안되었을 경우를 대비한 조건식       if (input_item != null & input_item !=""){         itemList.push(input_item)         //값이 있을 경우 배열에 값을 추가하기         document.querySelector('#item').value = null;         //input에 공백이 아닌 문자열이 있을 시, itemList 배열에 추가 및 input에 작성된 내용 초기화         //공백일 경우       } else {         alert('준비물을 작성해주세요.')         document.querySelector('#item').focus();       }              showList();       //값을 추가한 뒤, HTML 영역에 나타나게 하는 기능     }     function showList(){       let list = "<ul>"         //item이 추가될 때마다 for문이 반복하며 업데이트가 됨       for(let i=0; i < itemList.length; i++){         list += `<li>${itemList[i]}<span class='close' id=${i}> X <span></li>`       }       list += "</ul>"       document.querySelector('#itemList').innerHTML = list;       //해당 내용들을 담은 list를 HTML에 출력하기 위함       removeEvent()       //여기에 지우는 추가 이벤트를 작성해줘야 작동을 한다...     }      //delList()를 수행하기 위한 이벤트 기능     function removeEvent(){       let delBut = document.querySelectorAll('.close')        //변수에 class가 close인 모두를 저장 (배열처럼 저장이 됨)       for(let i = 0; i < delBut.length; i++){         delBut[i].addEventListener("click", delList);         //각각 하나씩 지정하여 기능을 주기 위해 for문을 사용.       }     }     //X를 눌렀을 때 가지고 있는 id 값 (for문에서 돌았던 i값)을 들고오는 기능     function delList(){       let id = this.getAttribute("id")       //this(클릭한 삭제 버튼)의 id값을 가져와 변수에 저장       itemList.splice(id, 1);        //id값은 정수기 때문에 위치 지정으로도 쓸 수 있다.         showList();        //다시 화면 리셋     }

여기는 오답 부분   위에와 마찬가지로 delBut에 class가 close인 값들을 담아내기는 했지만, 바로 이벤트를 주니 작동하지 않았었다.   이유는 배열로 담겼기 때문에 배열 자체에 기능을 주다보니 정상적으로 움직이지 않았던 것이었고, 이를 해결하기 위해서   removeEvent 기능을 만들어 각 버튼 하나 하나 기능을 지정해 주는 방식을 사용했다.     let delBut = document.querySelectorAll('.close')     delBut.addEventListener("click", delList)       // 이렇게 담으면 배열 전체가 되기 때문에 기능을 넣으려 해도 동작하지 않고 에러가 뜨는겁니다...