IF-ELSE 로 이벤트에 반응하는 로직을 짜는 법
<index.js>
const title=document.querySelector("#title");
const BASE_COLOR="rgb(52, 73, 94)";
const OTHER_COLOR="#7F8C8D";
function handleClick(){
const currentColor=title.style.color;
if (currentColor==BASE_COLOR){
title.style.color = OTHER_COLOR;
}else{
title.style.color=BASE_COLOR;
}
}
function init(){
title.style.color=BASE_COLOR;
title.addEventListener("click", handleClick);
}
init();
만약에 title을 처음으로 클릭한다면 처음엔 currentColor는 BASE_COLOR와 같음
처음 조건문은 참-> title.style.color는 OTHER_COLOR가 됨
그 다음에 title을 클릭하면 currentColor는 BASE_COLOR가 아님
조건문이 거짓이 되어 else 실행 -> BASE_COLOR로 바꿔줌
<index.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<title>Document</title>
</head>
<body>
<h1 id="title">Hello</h1>
<script src="index.js"></script>
</body>
</html>
<index.css>
body {
background-color: #ecf0f1;
}
h1 {
color: #34495e;
transition: color 0.5s ease-in-out;
}
.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="";
}
}
function init(){
title.addEventListener("click", handleClick);
}
init();
첫 클릭 시에는 현재 클래스가 CLICKED_CLASS와 같지 않으므로
if문 실행 -> 클래스를 clicked 로 해준다.
값이 같아지면 else 실행 -> 클래스를 비워준다.
CLASSLIST
그런데 만약 처음에 h1 에 마우스 커서가 바뀌는 btn이란 클래스를 가지고 있었다면?
위의 경우에 clicked라는 클래스가 생기면서 btn이란 클래스를 대체해 btn의 속성이 없어진다.
이런 경우를 방지하기 위해 classlist를 쓴다.
<index.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<title>Document</title>
</head>
<body>
<h1 id="title" class="btn">Hello</h1>
<script src="index.js"></script>
</body>
</html>
<index.js>
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클래스가 제거되지 않는 것을 확인 할 수 있다.
하지만 두번 클릭했을 땐 뒤로 돌아가지 않는다.
이유는 currentClass가 더이상 clicked상태가 아니기 때문이다. btn clicked상태다.
지금은 한개 클래스만 체크할 수 있으므로 수정을 한다.
const title=document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick(){
const hasClass=title.classList.contains(CLICKED_CLASS);
if(hasClass){
title.classList.remove(CLICKED_CLASS);
}else{
title.classList.add(CLICKED_CLASS);
}
}
function init(){
title.addEventListener("click", handleClick);
}
init();
contains 객체: value가 존재하지는지 체크한다.
hasClass는 엘리먼트가 CLICKED_CLASS를 가지는지 체크.(true/false 값을 줌)
if 문 -만약 title.classList가 CLICKED_CLASS를 가지고 있다면 remove한다
else문 - 없다면 add한다.
TOGGLE
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();
결과는 같다. 훨 간편하다~
'FRONT > JAVASCRIPT' 카테고리의 다른 글
| [javascript] LocalStorage에 select option 값 저장하기 (0) | 2021.06.05 |
|---|---|
| [노마드코더] 바닐라 JS로 크롬앱 만들기 6일차(greeting, todo) (0) | 2021.06.04 |
| [노마드코더] 바닐라 JS로 크롬앱 만들기 5일차(clock, greeting) (0) | 2021.06.03 |
| [노마드코더] 바닐라 JS로 크롬앱 만들기 3일차(getElementById, querySelector) (0) | 2021.06.02 |
| [노마드코더] 바닐라 JS로 크롬앱 만들기 (1)자바스크립트란? (0) | 2021.06.02 |