앵코딩
5. addEventListner() 본문
<style>
#alert{
background-color: bisque;
padding: 10px;
margin-top: 5px;
margin-bottom: 10px;
display: none;
}
</style>
<body>
<div class="alert box1" id="alert">
<p id="con">알림창</p>
<button id="close">닫기</button>
</div>
<button onclick="open1();">버튼1</button>
<button onclick="open2();">버튼2</button>
<script>
// 아이디가 close인 요소를 클릭하면
document.getElementById('close').addEventListener('click',function(){
// 키보드 - keydown
// 스크롤 - scroll
// 마우스 올리면 - mouseover
// 여기 들어가는 코드를 실행해줌
document.getElementById('alert').style.display ='none';
});
// event -> 클릭, 키입력, 스크롤, 드래그
function open1(){
document.getElementById('alert').style.display ='block';
document.getElementById('con').innerHTML = '아이디를 입력하세요'
}
function open2(){
document.getele('alert').style.display ='block';
document.getElementById('con').innerHTML = '비밀번호를 입력하세요'
}
</script>
</body>
// 콜백함수
// 파라미터 자리에 들어가는 함수
document.getElementById('close').addEventListener('click',function(){});'JavaScipt > codingapple' 카테고리의 다른 글
| 7. jQuery (0) | 2023.04.09 |
|---|---|
| 6. 서브메뉴 만들기, class List (0) | 2023.04.09 |
| 4. 파라미터 (0) | 2023.04.09 |
| 3.Function (0) | 2023.03.26 |
| 2. Alert (0) | 2023.03.26 |
'JavaScipt/codingapple' Related Articles
more
Comments