📌 자바스크립트에서 입력 요소의 값 읽어들이기
웹 페이지에서 사용자로부터 입력을 받을 때, 다양한 **입력 요소(input, select)**를 사용합니다. 자바스크립트는 이러한 입력 요소에서 사용자가 입력한 값을 쉽게 읽어들이고, 이를 활용하여 웹 페이지를 동적으로 제어할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" contect="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수 정의하고 호출하기</title>
</head>
<body>
<input id='talk'>
<input id="push" type="button" value="push">
<form id="form">
<input name="name">
<input name="nick">
<input type="submit">
</form>
<script>
const form = document.getElementById("form")
// submit 이벤트의 대상은 form에서 발생했을때 내가 어떻게(function)하겠다라는 뜻
form.addEventListener("submit", function(event){
event.preventDefault()
const p = document.createElement("p")
p.textContent = `${event.target.name.value}의
별명은 ${event.target.nick.value}`
document.body.append(p)
// event.target.name.value // event.target은 form이고 input.name.name.입력값
// event.target.nick.value // event.target은 form이고고 input.name.nick.입력값
})
const input = document.getElementById("talk")
const button = document.getElementById("push")
// input이 event의 target이된다. 이 event의 값을받아온다.
input.addEventListener("keyup", function(e){
console.log(e.target.value)
})
button.addEventListener("click", function(){
alert(input.value)
})
button.addEventListener("click", function(){
input.value = "버튼 눌러서 써짐"
})
button.addEventListener("click", function(){
const p = document.createElement("p")
p.textContent = input.value
document.body.append(p)
})
</script>
</body>
</html>📋 입력 요소의 value 속성
입력 요소에서 사용자가 직접 입력한 값에 접근하려면, value 속성을 사용해야 합니다.
🔹 value 속성 사용 예시
- <input>: 텍스트, 비밀번호, 이메일 입력 필드 등에서 입력값을 가져옵니다.
- <select>: 드롭다운 목록에서 선택한 값을 가져옵니다.
✅ 예시 1: <input> 요소에서 값 읽어오기
<input type="text" id="username" value="유노">
<button onclick="getValue()">입력값 보기</button>
<script>
function getValue() {
let inputValue = document.getElementById('username').value;
alert(inputValue); // "유노" 출력
}
</script>- 사용자가 텍스트 필드에 입력한 값을 value 속성으로 읽을 수 있습니다.
✅ 예시 2: <select> 요소에서 값 읽어오기
<select id="userChoice">
<option value="option1">옵션 1</option>
<option value="option2">옵션 2</option>
<option value="option3">옵션 3</option>
</select>
<button onclick="getSelectedValue()">선택된 값 보기</button>
<script>
function getSelectedValue() {
let selectedValue = document.getElementById('userChoice').value;
alert(selectedValue); // 선택된 값 출력
}
</script>- <select> 요소에서 value 속성은 사용자가 선택한 옵션의 값을 반환합니다.
📋 value 속성의 차이점: textContent와 value
자주 혼동되는 부분은 **textContent**와 **value**입니다. 둘의 차이를 이해하는 것이 중요합니다!
- textContent: 요소에 텍스트로 작성된 내용을 읽습니다. 사용자가 입력한 값이 아니라 HTML 요소 내 텍스트를 반환합니다.
- 예: <p> 태그 안의 텍스트
- value: 사용자가 입력한 값을 읽습니다. 주로 <input>, <select>와 같은 입력 요소에 사용됩니다.
✅ 예시 (차이점)
<input type="text" id="inputElement" value="입력된 값">
<p id="textElement">텍스트 내용</p>
<script>
console.log(document.getElementById('inputElement').value); // "입력된 값"
console.log(document.getElementById('textElement').textContent); // "텍스트 내용"
</script>📋 폼 요소에서 여러 입력값 읽어오기
<form> 요소를 사용하면, 여러 입력값을 한 번에 읽어올 수 있습니다. name 속성을 기준으로 각 입력값을 구별할 수 있습니다.
✅ 예시: 폼에서 여러 입력값 읽어오기
<form>
<input type="text" name="username" value="유노">
<input type="email" name="useremail" value="user@domain.com">
<button type="button" onclick="getFormValues()">입력값 보기</button>
</form>
<script>
function getFormValues() {
let username = document.querySelector('input[name="username"]').value;
let useremail = document.querySelector('input[name="useremail"]').value;
alert("Username: " + username + "\nEmail: " + useremail);
}
</script>- name 속성을 사용하여 폼 요소의 값을 구별하고 읽을 수 있습니다.
✅ 결론
- value 속성은 사용자가 입력한 값을 읽을 때 사용됩니다.
- **textContent**는 HTML 요소 내의 텍스트를 읽을 때 사용됩니다.
- 폼(form) 요소에서 여러 입력값을 한 번에 읽을 수 있습니다.
자바스크립트에서 value 속성을 활용하면, 사용자 입력을 효율적으로 처리할 수 있습니다.
'JavaScript' 카테고리의 다른 글
| Chapter 3-20. 이벤트 핸들링(javascript) (0) | 2025.04.01 |
|---|---|
| Chapter 3-19. 인수와 반환(javascript) (0) | 2025.04.01 |
| Chapter 3-18. 함수 정의하고 호출하기(javascript) (0) | 2025.04.01 |
| Chapter 2-16. createElement & appendChild(javascript) (0) | 2025.03.31 |
| Chapter 2-15. 반복문 while(javascript) (0) | 2025.03.31 |