[JavaScript] 버튼 이벤트 개선하기

버튼 이벤트 문제

각 버튼을 누르면 해당하는 색깔이 div에 나타나도록 이벤트를 구현했다. 그런데 버튼기능이 2% 부족하다..
토글에 대해서 처음 배우고 감명받아서 적용해봤는데 무조건 좋은 건 없는 것 같다.

(문제점)

• 같은 버튼을 한번 더 클릭하면 기본세팅으로 돌아간다.
• 다른 버튼과 교차해서 클릭하면 알수없는 규칙으로 색깔이 나온다.

(해결방법)

• myColor.classList.toggle('red');을 add로 변경한다.
• remove(다른 색, 다른 색)을 준다.

반복되니까 forEach로도 해결된다

myBtnArr.forEach((element) => {
    element.addEventListener('click', () => {
        myColor.classList.remove('red', 'yellow', 'blue');
        if (element.className === 'btn-red') {
            myColor.classList.add('red')
        } else if (element.className === 'btn-yellow') {
            myColor.classList.add('yellow')
        } else {
            myColor.classList.add('blue')
        }
    })
})