유튜브 코딩애플 자바스크립트 3강
2023. 1. 11. 14:21ㆍJAVASCRIPT
숙제
function을 사용해 <button>내 내용 명료하게 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="name.css">
</head>
<body>
<div class="alert-box" id="alert">Alert 박스</div>
<button onclick="알림창열기()">열기
</button>
<button onclick="알림창닫기()">닫기
</button>
<script>
function 알림창열기(){
document.getElementById('alert').style.display = 'block';
}
}
function 알림창닫기(){
document.getElementById('alert').style.display='none';
}
</script>
</body>
</html>
변경할 HTML요소를 정리한 후
<button onclick="알림창열기()">열기
</button>
JS로 조작을 한다.
function 알림창열기(){
document.getElementById('alert').style.display = 'block';
}
조작할 대상 이후 조작 방법 순으로 나와야함
'JAVASCRIPT' 카테고리의 다른 글
| 유튜브 코딩애플 자바스크립트 4강 (0) | 2023.01.12 |
|---|---|
| 유튜브 코딩애플 자바스크립트 2강 (0) | 2023.01.11 |
| 유튜브 코딩애플 자바스크립트 1강 (0) | 2023.01.11 |