<style>
.canvas {
width: 500px;
height: 500px;
background-color: black;
margin: 0 auto;
}
ul {
display: flex;
justify-content: space-around;
}
.canvas.red{
background-color: red;
}
.canvas.yellow{
background-color: yellow;
}
.canvas.green{
background-color: green;
}
</style>
<body>
<div class="canvas"></div>
<ul>
<li><button class="btn-red">빨강</button></li>
<li><button class="btn-yellow">노랑</button></li>
<li><button class="btn-green">초록</button></li>
</ul>
<script>
const canvas = document.querySelector('.canvas');
const btnRed = document.querySelector('.btn-red');
const btnYellow = document.querySelector('.btn-yellow');
const btnGreen = document.querySelector('.btn-green');
btnRed.addEventListener('click', () => {
canvas.classList.add('red');
})
btnYellow.addEventListener('click', () => {
canvas.classList.add('yellow');
})
btnGreen.addEventListener('click', () => {
canvas.classList.add('green');
})
</script>
</body>근데 다시 다른 버튼 누를 때 그 색으로 바뀌지 않음!
버튼 누를 때마다 클래스명이 누적되었기 때문(canvas red yellow green)
콘솔창 보면서 확인할 것!
나머지 클래스를 없애주자
btnRed.addEventListener('click', () => {
canvas.classList.remove('red, yellow', 'green');
canvas.classList.add('red');
}) 초기화 하면 다른 거 생각하지 않아도 되고 그후에 클래스 추가~
근데 너무 중복이 있잖아?
const canvas = document.querySelector('.canvas');
const btnRed = document.querySelector('.btn-red');
const btnYellow = document.querySelector('.btn-yellow');
const btnGreen = document.querySelector('.btn-green');
const btnArr = [btnRed, btnYellow, btnGreen];
btnArr.forEach(item => {
item.addEventListener('click', () => {
canvas.classList.remove('red', 'yellow', 'green');
if (item.classList.contains("btn-red")) {
canvas.classList.add('red');
} else if (item.classList.contains("btn-yellow")) {
canvas.classList.add('yellow');
} else if (item.classList.contains("btn-green")) {
canvas.classList.add('green');
}
})
})
주니어 프론트엔드 웹 개발자 🐛