[JavaScript]함수와 파라미터 사용하기
파라미터를 사용하는 이유
함수에 파라미터를 추가해서 사용하면 비슷한 함수는 재활용하여 사용할 수 있다. 파라미터는 콤마를 구분하여 작명하면 여러개 사용할 수도 있다.
파라미터 사용해서 함수 재활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="alert-box" id="alert">
<p>Alert 박스</p>
<button onclick="알림창열고닫기('none')">닫기</button>
</div>
<button onclick="알림창열고닫기('block')">버튼</button>
<script>
function 알림창열고닫기(파라미터){
document.getElementById('alert').style.display = 파라미터;
}
</script>
</body>
</html>
여러개의 파라미터 사용하여 함수 재활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="alert-box" id="alert">
<p id="title">Alert 박스</p>
<button onclick="알림창열고닫기('none','')">X</button>
</div>
<button onclick="알림창열고닫기('아이디 입력하세요.','block')">버튼1</button>
<button onclick="알림창열고닫기('비밀번호 입력하세요.','block')">버튼2</button>
<script>
function 알림창열고닫기(파라미터1, 파라미터2){
// 1. 제목 바꾸기
document.getElementById('title').innerHTML = 파라미터1;
// 2. 알림창 바꾸기
document.getElementById('alert').style.display = 파라미터2;
}
</script>
</body>
</html>main.css
.alert-box{
background:#aba8f4;
color:#4646b4;
padding: 20px;
border-radius: 5px;
display: none;
}
