Dropdown-SelectBox에 JS 추가하기

1. 해당 요소에 접근하기

<button type="button" class="select-btn">최애 프로그래밍 언어</button>
<ul class="list-language">
   <li>
      <button type="button" class="listBtn" value="Python">Python</button>
   </li>
   <li>
      <button type="button" class="listBtn" value="Java">Java</button>
   </li>
   <li>
      <button type="button" class="listBtn" value="JavaScript">JavaScript</button>
   </li>
   ...
</ul>

const selectBtn = document.querySelector('.select-btn');
const listBox = document.querySelector('.list-language');
const listBtn = document.querySelectorAll('.listBtn');

여기서 listBtn만 querySelectorAll로 준 이유는?
Python, Java, JavaScript 등 단일 요소가 아닌, 여러 요소에 접근해야 하기 때문이다.

querySelectorAll
선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환한다.
반환객체가 nodeList이기에 for문 또는 forEach문을 사용한다.

2. '최애 프로그래밍 언어' 버튼 클릭 시, 리스트 박스 보이거나 숨기기

selectBtn.addEventListener('click', () => {
    selectBtn.classList.toggle('on');
});

toggle은 해당 클래스가 없으면 넣어주고, 있으면 제거한다.

.select-btn.on {
    background-image: url(image/icon-Triangle-up.png);
}

.select-btn.on+.list-language {
    display: block;
}

3. 언어 선택하면 버튼에 반영되도록

listBtn.forEach(item => {
   item.addEventListener('click', (event) => {
       const btnName = event.currentTarget.textContent;
       selectBtn.textContent = btnName;
   });
});

이벤트 객체를 활용한다. 이벤트에서 호출되는 핸들러에 이벤트와 관련된 정보를 가지고 있는 매개변수가 전송된다.
currentTarget : 이벤트가 처리되는 요소의 정보를 얻을 수 있다.
textContent : 요소 내의 텍스트에 접근할 수 있다.

4. 언어나, 버튼 바깥 클릭 시, 리스트 박스 숨기기

selectBtn.addEventListener('blur', () => {
    selectBtn.classList.remove('on');
});

blur 이벤트를 사용해서 selectBtn을 벗어나면 on 클래스가 제거되도록 한다.

이렇게 하면 완성!
...일 줄 알았는데 blur 이벤트를 추가하고 3번 언어 선택 시 버튼에 반영되는 동작이 먹통이 되어버렸다.
해결 방법은 다음 포스팅에서...