[바닐라JS로 크롬 앱 만들기] DOM - If else - Function practice Two

[출처-유튜브 노마드 코더 Nomad Coders]

https://youtu.be/S4BN1tZmmWw

 

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 = "";
    }
}

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

init();

 

index.css (css는 고정)

body {
    background-color: #ecf0f1;
}

.btn {
    cursor: pointer;
}

h1 {
    color: #34495e;
    transition: color 0.5s ease-in-out;
}

.clicked{
    color: #7f8c8d;
}

 

 

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();

처음 클릭했을 시에만 변경되고 그 후론 클릭해도 변하지않음!!

 

 

-toggle은 on/off 스위치와 비슷하다고 볼 수 있다

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

const CLICKED_CLASS = "clicked";

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

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

init();