320x100
이전 연습 문제의 alert 박스를 만약 10개 만들어야하는데
각 박스에 표기되는 문자가 많다면 ?
붙여넣기 후 바꾸는 방법도 있지만, 좀 더 손쉬운 방법으로 가능하다 .
funtion의 공백의 기능 활용과 , addEventListener 활용이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="alert-box" id="alert">
<p id="title"></p>
<button id="close">닫기</button>
</div>
<button onclick="알림창('1')">버튼1</button>
<button onclick="알림창('2')">버튼2</button>
<button onclick="알림창('3')">버튼3</button>
<button onclick="알림창('4')">버튼4</button>
<button onclick="알림창('5')">버튼5</button>
<button onclick="알림창('6')">버튼6</button>
<button onclick="알림창('7')">버튼7</button>
<button onclick="알림창('8')">버튼8</button>
<button onclick="알림창('9')">버튼19</button>
<button onclick="알림창('10')">버튼10</button>
<script>
function 알림창(a) {
document.getElementById("title").innerHTML = a;
document.getElementById("alert").style.display = "block";
}
// function 비번알림창() {
// document.getElementById("title").innerHTML = "비번입력하셈";
// document.getElementById("alert").style.display = "block";
// }
// function 닫기() {
// document.getElementById("alert").style.display = "none";
// }
document.getElementById("close").addEventListener("click", function () {
document.getElementById("alert").style.display = "none";
});
</script>
</body>
</html>.alert-box {
background-color: rgb(224, 224, 255);
color: rgb(83, 83, 255);
padding: 20px;
border-radius: 10px;
display: none;
}반응형
'코딩 > JS' 카테고리의 다른 글
| JS 자바스크립트 Alert , FUNTION 웹페이지 적용 (0) | 2024.08.28 |
|---|---|
| JS 자바스크립트 형변환 설명 (0) | 2024.08.27 |
| JS 자바스트립트 자료형 기초 (0) | 2024.08.27 |
| JS 자바스크립트 alert, prompt, confirm 활용 (0) | 2024.08.27 |
| JS 자바스크립트 변수와 상수 (2) | 2024.08.26 |
