클릭 이벤트 질문입니다.

Question

안녕하세요, 선생님^^ 이번 강의에서 나온 기능을 활용해서 버튼을 누르면 버튼과 상자의 색이 바뀌는 기능을 만들어봤는데요. 버튼과 박스를 하나의 부모 요소에 포함시키지 않으니 currneItem 변수를 할당하는 것이 너무 어렵습니다ㅜㅜ https://jsfiddle.net/yfrhv1u5/8/ 위의 코드와 같이하면 currentItem에 btn이 box로 재할당 되어서 원하는 기능 구현이 되지 않고  https://jsfiddle.net/ywmpLdvc/5/ 위의 코드와 같이 currentItems를 배열로 만들어서 값을 저장하면 원하는 기능이 구현은 되는데 active, inative 함수로 분리하는 방법을 모르겠습니다ㅜㅜㅜ 혼자 고민해봐도 모르겠어서 질문 드립니다.ㅜㅜ 답변 주시면 감사하겠습니다

1분코딩 · Answer

현재 활성화된 인덱스를 기준으로 세팅하시면, 구조가 복잡해져도 컨트롤 하기가 좋답니다. 아래와 같이 해보세요^^ const btnGroup = document.querySelector(".btn-group"); const btns = document.querySelectorAll(".btn"); const boxes = document.querySelectorAll(".box"); let currentIndex = 0; //data-index 설정 for (let i = 0; i < btns.length; i++) { btns[i].dataset.index = i; boxes[i].dataset.index = i; } function activate(index) { currentIndex = index; btns[currentIndex].classList.add('clicked'); boxes[currentIndex].classList.add('clicked'); } function inactivate() { btns[currentIndex].classList.remove('clicked'); boxes[currentIndex].classList.remove('clicked'); } const btnClickHandler = (e) => { const targetElem = e.target; const targetIdx = targetElem.dataset.index; inactivate(); activate(targetIdx); }; btnGroup.addEventListener("click", btnClickHandler);