2024-10-15
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#area {
width: 400px;
height: 100px;
background-color: ivory;
border: 1px solid black;
}
</style>
</head>
<body>
<div align="center">
<table>
<legend>개인 정보 입력</legend>
<tr>
<th>이 름</th>
<td> <input type="text" placeholder="이름 입력"></td>
</tr>
<tr>
<th>나 이</th>
<td> <input type="text" placeholder="나이 입력"></td>
</tr>
<tr>
<th>연락처</th>
<td> <input type="text" placeholder="연락처 입력"></td>
</tr>
<tr>
<th>주 소</th>
<td> <input type="text" placeholder="주소 입력"></td>
</tr>
</table>
<br>
<button onclick="printValue();">입력값 출력하기</button>
<br>
<div id="area"></div>
</div>
<script>
function printValue() {
let inputList = document.getElementsByTagName("input");
let name = inputList[0].value; // value는 값을 가져옴
let age = inputList[1].value;
let phone = inputList[2].value;
let addr = inputList[3].value;
let area = document.getElementById("area");
area.innerHTML = ""; // 출력을 한 번만 하기 위한 용도
area.innerHTML += "이 름 :" + name + " 님 <br>";
area.innerHTML += "나 이 :" + age + " 세 <br>";
area.innerHTML += "연락처 :" + phone + "<br>";
area.innerHTML += "주 소 :" + addr + "<br>";
}
</script>
</body>
</html>
'JavaScript > 기초 내용 정리' 카테고리의 다른 글
| JavaScript(BOM)_Exam_01 (0) | 2024.10.16 |
|---|---|
| JavaScript(DOM)_10 (2) | 2024.10.15 |
| JavaScript(DOM)_08 (0) | 2024.10.15 |
| JavaScript(DOM)_07 (0) | 2024.10.15 |
| JavaScript(DOM)_06 (1) | 2024.10.15 |