「JS」をクリックした特定のボックスで点灯

例

のボックスが黄色の場合は、別のボックスをクリックして、元の黄色のボックスをグレーに削除します.

addEventListener ( , )

<script>
const box = document.getElementsByClassName('.favorites_icon')
// const box = document.querySelectorAll('.favorites_icon'); 도 사용 가능함
//(1) 변수 작성

function onAndOff(event) {
    for(let i = 0; i < box.length; i++){
        event.target.classList.add('on');
    }
}
//(3) 그에 따른 함수작성

for(let i=0; i < box.length; i++){
    box[i].addEventListener('click', onAndOff)
}
//(2) 보여줄 이벤트 작성
</script>

//이상태까지만 작성하게 되면

<script>
function onAndOff(event) {
    for(let i = 0; i < box.length; i++){
        box[i].classList.remove('on');
    
        event.target.classList.add('on');
    }
}
</script>
//classList.remove를 사용하여 초기화 상태를 만들어주고
다시 버튼 동작으로 색상 변경

classList

html entity