DOM요소에 클래스명 제어하기

/* 1. 버튼 클릭하면 클릭한 요소에 class="on"을 붙여서 event 활성화.
    - btns의 순번index 요소에 classList라는 property를 불러오면 된다.
    - add,remove,contains
*/

btns.forEach((btn, index) => {
    btn.addEventListener("click", e=>{
        btns[index].classList.add('on');
        console.log(btns);
        console.log(btns[index].classList);
    })
})


/* 2. 버튼을 클릭하면 클릭한 그 버튼만 활성화 and 다른 버튼은 비활성화
   - 반복문 안쪽에 중첩 반복문을 해준다.
*/



  1) btns의 유사배열을 돌면서 event연결을 해놓는다.
     어떠한 event 연결인가?
    1-1) 버튼을 클릭하면 다시 btns 유사배열을 돌면서 'on' class를 지워버린다.
    1-2) 클릭한 버튼에만 'on' class를 추가한다.

btns.forEach((btn, index) => {
    btn.addEventListener("click", e=>{
        for(let item of btns) item.classList.remove('on');

        btns[index].classList.add('on');
    })
})


/*
  3. 버튼을 클릭했는데 이미 class 'on'이 들어가 있으면 
     아무것도 실행되지 않고 코드가 종료(event문이 종료)되게 한다.
     1) 내가 클릭한 바로 그 버튼 -> e.currentTarget
     2) 버튼을 눌렀는데 isOn이 true이면 이미 그 버튼이 활성화 되어있으니깐
        밑에 코드를 실행하지 않겠다.
*/

btns.forEach((btn, index) => {
    btn.addEventListener("click", e=>{
        let isOn = e.currentTarget.classList.contains('on');
        if(isOn) return;

        for(let item of btns) item.classList.remove('on');
        btns[index].classList.add('on');
    })
})