자바스크립트 DOM IF ELSE 응용

<index.css>
body{
background-color: #ecf0f1;
}

h1 {
color: #34495e;
}

.clicked { //클래스 값 . 으로 표기
color: #7f8c8d;
}

---

<index.js>
const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick(){
const currentClass = title.className;
if(currentClass !== CLICKED_CLASS){
title.className = CLICKED_CLASS;
}else {
title.className = "";
}
}
// 만약 타이틀의 클래스가 CLICKED_CLASS와 다르면(현재는 타이틀의 클래스 값 빈 상태, ID 값만 존재), CLICKED_CLASS 값으로 타이틀 클래스 값 변경해주고, 같다면 빈값을 할당

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

---

<실행 결과>
클릭전

클릭후