앵코딩
4. 파라미터 본문
<div class="alert-box" id="alert-box">Alert 박스
<button onclick="close_box('none')">닫기</button>
</div>
<button onclick="close_box('block')">버튼</button>
//파라미터
function close_box(구멍) {
//축약할 코드 작성
document.getElementById('alert-box').style.display = 구멍;
}
close_box();
//파라미터를 쓰면 () 안에 내용 입력가능
//()에 있는 내용이 구멍 자리에 들어가서 실행
close_box('none')
close_box('block')함수 2개를 만들필요없이 하나만으로 활용 가능 !
숙제
alert창 2개 만들기
1. 아이디를 입력 안하셨어요
2. 비번을 입력 안하셨어요
<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 onclick="openAlert('none');">닫기</button>
</div>
<button onclick="open1();">버튼1</button>
<button onclick="open2();">버튼2</button>
<script>
function open1(){
document.getElementById('alert').style.display ='block';
document.getElementById('con').innerHTML = '아이디를 입력하세요'
}
function open2(){
document.getele('alert').style.display ='block';
document.getElementById('con').innerHTML = '비밀번호를 입력하세요'
}
function openAlert (구멍){
document.getElementById('alert').style.display = 구멍
// 긴 코드를 함수
// function작명은 구체적으로
}
</script>
</body>
'JavaScipt > codingapple' 카테고리의 다른 글
| 6. 서브메뉴 만들기, class List (0) | 2023.04.09 |
|---|---|
| 5. addEventListner() (0) | 2023.04.09 |
| 3.Function (0) | 2023.03.26 |
| 2. Alert (0) | 2023.03.26 |
| 1. selector (셀렉터) (1) | 2023.03.26 |
'JavaScipt/codingapple' Related Articles
more
Comments