<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 연습</title>
<style>
#result {
width:400px;
height:400px;
background:#ffffff; /*white */
border:2px solid black;
}
</style>
</head>
<body>
<ul>
<li><a href="#" onclick="alert('Green 버튼을 클릭했습니다.')">Green</a></li>
<li><a href="#" onclick="alert('Orange 버튼을 클릭했습니다.')">Orange</a></li>
<li><a href="#" onclick="alert('Purple 버튼을 클릭했습니다.')">Purple</a></li>
</ul>
<ul>
<li><a href="#" onclick="changeBg('green')">Green</a></li>
<li><a href="#" onclick="changeBg('orange')">Orange</a></li>
<li><a href="#" onclick="changeBg('purple')">Purple</a></li>
</ul>
<div id="result">
<button class="over" id="open">눌러봐</button>
<div id="desc" class="detail">
<p>글자색을 바꿔</p>
<button id="change">글자색바꾸기</button>
<button id="reset">글자색되돌리기</button>
<button id="close">닫기</button>
</div>
</div>
<script>
function changeBg(color){
alert(color+'버튼을 클릭했습니다.')
var result = document.querySelector('#result');
result.style.backgroundColor = color;
}
var changeBtn = document.querySelector("#change");
changeBtn.onclick = changeColor;
function changeColor(){
document.querySelector("p").style.color = "#f00"
}
document.querySelector("#reset").onclick = changeBlack;
function changeBlack(){
document.querySelector("p").style.color = "black"
}
document.querySelector('#open').onclick = function(){
document.querySelector('#desc').style.display = "block";
document.querySelector('#open').style.display = "none";
}
document.querySelector('#close').onclick = function(){
document.querySelector('#desc').style.display = "none";
document.querySelector('#open').style.display = "block";
}
</script>
</body>
</html>
