JAVASCRIPT ) 클릭했을 때 class 추가하고 재클릭하면 다시 없애기

글자를 클릭하면 주황색, 다시 클릭하면 파랑색, 다시 클릭하면 주황색... 무한 반복되는 예제이다.

클릭하면 <h1>태그의 class에 active를 추가하고 다시 클릭하면 active를 삭제하고, 다시 클릭하면 추가하는..무한 반복되는 방식이다. 

 

우 클릭전 / 좌 클릭후

 

const h1 = document.querySelector("h1");

function clickEvent(){
  if(h1.className === "active"){
    h1.className = "";
  } else {
    h1.className = "active";
  }
}

h1.addEventListener("click", clickEvent);

 

 

위 예제는 스트링 "active"가 반복된다. 예제에서는 상관없겠지만 코드가 길어지고, class이름이 수정 된다면? 일일이 다 고쳐야 할것이다. 그러다 오타가 날 수도 있다. 그래서 아래의 예제는 class이름을 한번만 수정하면 되도록 코드를 수정하였다.

 

const h1 = document.querySelector("h1");

function clickEvent(){
  const activeClass = "active";
  if(h1.className === activeClass){
    h1.className = "";
  } else {
    h1.className = activeClass;
  }
}

h1.addEventListener("click", clickEvent);

 

위 예제는 잘 작동하는것 같지만 버그가 발생한다. 이미 <h1>에 class가 있는 경우이다.

예를들어 <h1 class="title"> 이라고 이미 class가 있으면, 클릭했을 때 "active"가 클래스에 추가되는것이 아니라 통째로 바뀐다. 즉, <h1 class="active">로 바뀐다. (기존의 class가 사라짐) 

아래는 해결코드이다.

 

 

Element.classList

classList는 읽기 전용 프로퍼티입니다.

 

• classList.add(String) : 지정한 클래스 값을 추가. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.
• classList.remove(String) : 지정한 클래스 값을 제거
  ! 존재하지 않는 클래스를 제거하는 것은 에러를 발생하지 않는다.
• classList.contains(String) : 지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.
• classList.replace(oldClass, newClass) : 존재하는 클래스를 새로운 클래스로 교체
• classList.toggle(String) : 클래스 속성값이 없는 경우 추가하며 추가했을 경우 다시 제거 그리고 반복한다.

 

const h1 = document.querySelector("h1");

function clickEvent(){
  const activeClass = "active";
  if(h1.classList.contains(activeClass)){
    h1.classList.remove(activeClass);
  } else {
    h1.classList.add(activeClass);
  }
}

h1.addEventListener("click", clickEvent);

 

위의 예제는 classList.contains로 클래스의 존재를 확인한 후, 존재하면(true) active를 지우고, 존재하지않으면(false) active를 추가하는 코드입니다.

아래는 더 함축된 코드입니다.

 

const h1 = document.querySelector("h1");

function clickEvent(){
  h1.classList.toggle("active");
};

h1.addEventListener("click", clickEvent);