카테고리 없음
HTML5 - 박스 클릭 시 색상 및 A,B,C 순으로 변경 - javascript
artra
2023. 7. 4. 14:30
반응형
A
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 색상 및 문자 변경</title>
<style>
.box {
width: 50px;
height: 50px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 박스의 클릭 이벤트 처리를 위해 onclick 속성에 함수명 전달 -->
<div class="box" id="box" onclick="toggleBox()">
<span id="letter">A</span>
</div>
<script>
/* 클릭 이벤트를 처리하는 함수 */
function toggleBox() { // 마우스 클릭시 if, else if, else 순으로 작동
// 현재 박스의 문자 값을 가져옵니다.
const currentLetter = document.getElementById('letter').textContent;
// 박스의 스타일을 변경하기 위해 박스 요소의 참조를 가져옵니다.
const box = document.getElementById('box');
if (currentLetter === 'A') {
document.getElementById('letter').textContent = 'B';
box.style.backgroundColor = 'green';
} else if (currentLetter === 'B') {
document.getElementById('letter').textContent = 'C';
box.style.backgroundColor = 'BLUE';
} else {
document.getElementById('letter').textContent = 'A';
box.style.backgroundColor = 'red';
}
}
</script>
</body>
</html>
|
cs |
반응형