클릭이벤트. 색상바꾸기

목표

element를 click 했을 때 색상이 파란색이 되고

파란 element를 click하면 토마토색이 되게 한다.

작동원리 파악

todo -> click = blue

blue todo -> click = tomato

1. click event를 사용.
2. 색상에 따라 만들 수 있는 조건을 확인.

어떤 식으로 작성해야 하는지 보자.

See the Pen by jongha (@gajong) on CodePen.

 

 

console을 보면

click 할 때마다 todo.style.color가 blue로 나오는 것을 확인할 수 있다.

그럼 todo.style.color가 blue이면 tomato가 되게 추가해보자. (작동원리 2번)

condition에 따른 작동(if, else)

See the Pen by jongha (@gajong) on CodePen.

 

 

if, else(참고)를 사용해 todo.style.color가 blue면 tomato, blue가 아니면 blue로 만들었다.

결과적으로 완성했지만 변수를 사용해 조금 더 깔끔하게 만들어보자.

변수(variable) 사용하기.

const todo = document.querySelector("div.todo-list h1:nth-child(2)");
function handleTitleClick() {
    const currentColor = todo.style.color;
    let newColor;
    if (currentColor === "blue") {
        newColor = "tomato";
    } else {
        newColor = "blue";
    };
    todo.style.color = newColor;
};
todo.addEventListener("click", handleTitleClick);

현재 색상을 currentColor 변수, 바뀌는 색상을 newColor 변수로 만든다.

newColor 변수는 변화하기 때문에

let으로 생성하자.

currentColor가 blue면 newColor가 tomato가 되고 to.style.color = tomato가 되고

currentColor가 blue가 아니면 newColor는 blue가 된다.

css in javaScript

javaScript를 상호작용 (animation)을 만들어 내는데 적합하고

css는 HTML을 꾸미는데 element style 하는데 적합하기 때문에

적합한 도구를 사용하는 것이 좋다.

javaScript에 색상, style이름을 사용하지 않을 거다.

css

.active {
	color: blue;
}
.deactive {
	color: tomato;
}

javaScript

const todo = document.querySelector("div.todo-list h1:nth-child(2)");
function handleTitleClick() {
    todo.className = "active";
};
todo.addEventListener("click", handleTitleClick)

click 했을 때 todo의 class = active가 생성된다.

그리고 css에서 class active = blue라고 했으니까

click 했을 때 todo가 blue색상이 된다.

이제 if문을 써서 이전과 같은 결과를 만들어보자.

이제 다시 blue로 바꿀 건데 class를 제거해서 다시 blue로 만들 거다.

condition에 따른 작동(if, else)

console.dir(todo);

를 해보면 todo.className이 ""로 되어있는 걸 알 수 있다.

className에 따른 조건문을 작성한다.

See the Pen by jongha (@gajong) on CodePen.

 

 

변수 사용하기

className인 string을 반복해서 사용하고 있는데 이러면 위험한 점이 있다.

className을 정확하게 입력하지 않을 경우 작동되지 않고 아무 오류도 나오지 않아서 어디가 잘 못 된 건지 찾기 어렵다.

자주 있는 실수이다. 이런 개발자가 정해놓은 string을 raw string이라고 한다.

 

변수 명이 틀리면 console에서 오류로 알려주기 때문에.

raw string을 변수로 지정해 주는 것이 좋다.

const todo = document.querySelector("div.todo-list h1:nth-child(2)");
function handleTitleClick() {
    const activeClass = "active";
    const deactiveClass = "deactive";
    if(todo.className === "" || todo.className === deactiveClass) {
        todo.className = activeClass;
    } else if(todo.className === activeClass) {
        todo.className = deactiveClass;
    }
};
todo.addEventListener("click", handleTitleClick)

className이 변경되면서 색상이 변경된다.

하지만 classname은 이전 class들은 상관하지 않고 class를 변경해버린다.

ClassName의 문제

See the Pen by jongha (@gajong) on CodePen.

 

 

이미 html에서 class가 지정되어 있고 그 class에 CSS style이 되어있다면

className을 사용해 class를 변경하면 지정된 style이 없어진다는 문제가 있다.

const activeClass = "active list-two";

이런 식으로 원래 class를 가지고 가도 되지만

원래 지정된 class가 두 개이면 java는 물론이고 css까지 업데이트해줘야 하는 문제가 있다.

그래서 javaScript로 모든 class name을 변경하지 않는 것이 좋다.

classList 사용

const todo = document.querySelector("div.todo-list h1:nth-child(2)");
function handleTitleClick() {
    const activeClass = "active";
    const deactiveClass = "deactive";
    if(todo.classList.contains(activeClass)) {
        todo.classList.add(deactiveClass);
        todo.classList.remove(activeClass);
    } else {
        todo.classList.add(activeClass);
        todo.classList.remove(deactiveClass);
    }
};
todo.addEventListener("click", handleTitleClick);

add는 classList에 새로운 class를 추가한다.

remove는 classList에 존재하는 class를 제거한다.

contains는 classList에 해당 class가 존재하는지 확인한다. 존재하면 true.

 

activeClass가 존재하지 않으면 add 하고 deactiveClass를 remove 한다.

activeClass가 존재하면 remove 하고 deactiveClass를 add 한다.

 

toggle을 이용하면 좀 더 줄일 수 있다.

toggle 해당 class가 존재하면 제거하고 false

없다면 생성하고 true.

const todo = document.querySelector("div.todo-list h1:nth-child(2)");
function handleTitleClick() {
    const activeClass = "active";
    const deactiveClass = "deactive";
    if (todo.classList.toggle(activeClass)) {
        todo.classList.remove(deactiveClass);
    }else if(todo.classList.toggle(deactiveClass)) {};
};
todo.addEventListener("click", handleTitleClick)

만약 activeClass가 없다면 activeClass를 추가하고 deactiveClass를 제거한다.

activeClass가 있다면 activeClass를 제거하고 deactiveClass가 없다면 deactiveClass를 추가한다.

약간 복잡해졌지만 좀 더 줄었다.

See the Pen by jongha (@gajong) on CodePen.