노마드 코더 - 바닐라 JS로 크롬 앱 만들기 - addEventListener

오) .active 추가

 

 

const title = document.querySelector("button");

function titleClick() {
    const clickedClass = "active"
    if(title.classList.contains(clickedClass)) {
        title.classList.remove(clickedClass);
    } else  {
        title.classList.add(clickedClass);
    }
}

title.addEventListener("click", titleClick);// title.onclick = titleClick 같은 방법

className을 사용하면 기존에 가지고 있던 클래스도 없애버려서 사용불가

clickedClass 대신에 'active'를 넣어도 되지만 오류의 위험이 있어 clickedClass로 따로 선언

contains()를 통해 clickedClass를 포함하고 있는지 확인한 후 클래스를 추가하고 없앰.

 

 

function titleClick() {
    title.classList.toggle('active');
}

toggle을 이용하면 더 간단하게 사용할 수 있음.