[JS] 클릭한 특정 박스에 불켜기

예제

여기저기 방 불을 키고 다니는 아이들을 위해 하나의 방에 불을 키면 다른 방 불을 꺼

1. 클래스 .favorites_icon을 데이터로 갖는 변수를 만드세요.
2. 세 개의 박스 중 한 박스를 클릭하면 해당 박스가 노란색이 되도록 on 클래스를 추가하세요.
3. 단 하나의 박스가 노란색인 상태에서 다른 박스를 클릭하면 원래 노란색인 박스는 회색이 되도록 on 클래스를 제거하세요.
   

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

classList를 이용하면 클래스를 조작하는 다양한 메서드들을 쓸 수 있다.
classList.add : 클래스를 필요에 따라 삽입한다.
classList.remove : 클래스를 필요에 따라 제거한다.

html entity

엔티티(Entity)
HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다.

이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다.

따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 합니다.

html entity 래퍼런스

---

이렇게 복습하고 있지만 여전히 잘모르겠다ㅎㅎㅎ