Javascript if else 추가 응용

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

const CLICKED_CLASS = "clicked";

function handleClick(){
const currentClass = title.className;
if(currentClass !== CLICKED_CLASS){
title.classList.add(CLICKED_CLASS);
}else {
title.classList.remove(CLICKED_CLASS);
}
}

function init(){
title.addEventListener("click", handleClick);
}
init();

클릭을 해도 원래 상태로 돌아가지 않음. 왜냐 현재 클래스가 btn_clicked 이기 때문. 더이상 clicked 가 아님.

---

아래 코드는 현재 상태가 btn_clicked 때문에 다시 클릭해도 돌아가지 않는 현상을 고침. 우린 한개 클라스만 체크 할 수 있다.
contains: value가 존재하는지 체크함. 만약에 title.classList가 clicked을 포함하고 있다묜 true가 됨. 없다면 add 있다면 remove.

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

const CLICKED_CLASS = "clicked";

function handleClick(){
const hasClass = title.classList.contains(CLICKED_CLASS)
if(!hasClass){
title.classList.add(CLICKED_CLASS);
}else {
title.classList.remove(CLICKED_CLASS);
}
}

function init(){
title.addEventListener("click", handleClick);
}
init();

---

Toggle : 클라스가 거기 있는지 체크해서 거기 있으면 add 아니면 remove를 해주는 걸 요약하는 함수. 위에 한거 요약함. 토글 함수 안에 있는 걸 체크함.

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

const CLICKED_CLASS = "clicked";

function handleClick(){
title.classList.toggle(CLICKED_CLASS);
}

function init(){
title.addEventListener("click", handleClick);
}
init();