[2021.6.20] Shopping list 만들기

드림코딩의 엘리쌤과 shopping list 만들기를 하고 있다.

만들다가 모르는 부분에 대해 고민하다보면 또 다른 모르는 것들이 방울방울 생겨난다..

해결방법을 찾을 떈 막막하고 머리 아프다가도 결국 해결을 하고나면 잔잔한 희열을 느낀다.

 

---

1. All clear button

 

모든 item 목록을 지우는 AllClearBtn을 만들었다.  모든 아이템을 담은 리스트를 만들기 위해 item 목록을 querySelectorAll 로 뽑아 nodelist로 만들고자 했다.

문제는 내가 기대한건 nodelist [item1, item2, item3 ... ] 인데.. 왜인지 자꾸 빈 nodelist를 반환한다.

 

const AllClearBtn = document.querySelector('.fa-plus-circle');
const lists = document.querySelectorAll('.item');

AllClearBtn.addEventListener('click', () => {
    console.log(lists); // NodeList []
});

 

이유는 (유사)배열을 만드는 변수가 이벤트함수 바깥에 위치해 있어서

이벤트가 일어나기 전에 빈 배열을 처음부터 품고있었기에 클릭을 해도 빈 배열이 나올 수 밖에 없었던 것이었다..

답정너st.

변수를 이밴트 함수 안 쪽으로 옮겨주니 해결! 

 

const AllClearBtn = document.querySelector('.fa-plus-circle');


AllClearBtn.addEventListener('click', () => {
	const lists = document.querySelectorAll('.item');
    console.log(lists); // NodeList [item1, item2, item3...]
});