[문제]
'빨강', '노랑', '초록' 버튼을 누르면 색상이 바뀌는 상자 만들기
첫번째 시도
<!DOCTYPE html>
<html lang="ko-KR">
<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">
<title></title>
<style>
.square {
width: 500px;
height: 500px;
background-color: black;
}
</style>
</head>
<body>
<div class="square"></div>
<ul class="color">
<li><button type="button" class="red">빨강</button></li>
<li><button type="button" class="yellow">노랑</button></li>
<li><button type="button" class="green">초록</button></li>
</ul>
<script>
const redBtn = document.getElementsByClassName("red");
const yellowBtn = document.getElementsByClassName("yellow");
const greenBtn = document.getElementsByClassName("green");
redBtn.addEventListener('click', function () {
const square = target.style.color;
target.style.color = "red";
});
</script>
</body>
</html>한 눈에 봐도 엉망인 코드가 만들어졌다...
가장 큰 문제점은 어떤 방식으로 동작하는지 script 코드의 원리를 몰랐던 것. (색상마다 class를 만들어줘야 하는데 엉뚱하게 sqare 본연의 색상을 바꾸려고 애쓰고 있었다 😂)
오늘 배운 내용을 복습하고 다시 코드를 짜보았다.
두번째 시도
<!DOCTYPE html>
<html lang="ko-KR">
<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">
<title></title>
<style>
.square {
width: 500px;
height: 500px;
background-color: black;
}
.square.red {
background-color: red;
}
.square.yellow {
background-color: yellow;
}
.square.green {
background-color: green;
}
</style>
</head>
<body>
<div class="square"></div>
<ul class="color">
<li><button type="button" class="red">빨강</button></li>
<li><button type="button" class="yellow">노랑</button></li>
<li><button type="button" class="green">초록</button></li>
</ul>
<script>
const square = document.querySelector(".square");
const btns = document.querySelectorAll("button");
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
square.classList.remove('yellow', 'red', 'green');
square.classList.toggle(btns[i].className);
})}
</script>
</body>
</html>-
1. square 클래스에 .red, .yellow, .green이 추가되면 색상이 바뀔 수 있도록 style을 설정했다.
-
2. 버튼 3개를 각각 선택하는 대신 querySelectorAll을 사용해 한번에 접근했다.
-
3. for문을 사용해 버튼을 'click' 할 때마다 i번째 버튼이 toggle되도록 만들었다. toggle은 버튼을 두 번 눌러야 해제되므로, 한 번 클릭한 버튼의 클래스가 중복 적용되는 것을 막기 위해 remove를 사용했다.
일일 회고
문제 상황이 주어졌을 때 어떤 명령어를 적용해야할지 아직은 방법이 한 번에 떠오르지 않는다.
레이아웃을 짜는 것처럼 과정을 머리로 그리기 위해선 많은 실전 연습이 필요할 것 같다..!
for문 대신 if-else나 forEach문 등을 사용할 수도 있다고 하는데, 욕심을 내기보단 하나의 풀이 방법을 제대로 이해하고 넘어가기를 우선순위에 두기로 했다.
기본이 익숙해지면 같은 문제를 여러 방법으로 푸는 것에 도전해보자!
