const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
h1.classList.toggle("clicked");
}
h1.addEventListener("click", handleTitleClick);
h1.classList.toggle("clicked"); 은 “clicked”가 classList에서 존재하는지 확인 후 없으면 toggle이 “clicked”을 classList에 추가를 해준다.
그러므로 위 toggle 코드는 아래의 긴 코드를 한 줄로 끝내준다.
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
const clickedClass = "clicked";
if (h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}
h1.addEventListener("click", handleTitleClick);
'프론트엔드 > Javascript' 카테고리의 다른 글
localStorage (0) | 2023.09.27 |
---|---|
preventDefault (0) | 2023.09.26 |
event (0) | 2023.09.21 |
조건문 (0) | 2023.09.19 |
return (0) | 2023.09.19 |