| 속성 | 설명 |
| .value | value값을 가질 수 있는 태그의 경우 그 값을 가져올 수 있다 (input태그) |
| .checked | input태그의 checkbox / radio 타입에 사용되며 선택되었을 때 true, 아닐때 false를 반환한다. |
| .selected | select태그에서 선택된 항목의 경우 true, 아니면 false를 반환한다. |
.value
input태그를 통해서 사용자가 입력한 값을 .value를 통해 받아서 사용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="name">이름</label><input type="text" name="name" id="name">
<label for="hobby">취미</label><input type="text" name="hobby" id="hobby">
<button id="btn">등록</button>
<div id="div1"></div>
<script>
document.querySelector("#btn").addEventListener("click", function(){
let p = document.createElement('p');
let name = document.querySelector("#name").value;
let hobby = document.querySelector("#hobby").value;
p.textContent = `${name}의 취미는 ${hobby}입니다.`
document.querySelector("#div1").append(p);
});
</script>
</body>
</html>
.checked
checkbox / radio 버튼이 체크되었을 때 true, 체크되지 않았을 때 false를 반환한다. 아래 예시는 for~of문을 사용해서 radio버튼의 객체를 순회한 다음, 버튼이 체크되었을 때 true가 된다는 점을 이용하여 if문을 사용해 #div1에 input의 value값을 받아 p태그를 삽입하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>지금 먹고싶은 음식종류를 선택해주세요.</h3>
<label for="radio1">한식</label><input type="radio" name="radio" id="radio1" value="한식"><br>
<label for="radio2">양식</label><input type="radio" name="radio" id="radio2" value="양식"><br>
<label for="radio3">일식</label><input type="radio" name="radio" id="radio3" value="일식"><br>
<label for="radio3">중식</label><input type="radio" name="radio" id="radio3" value="중식"><br>
<button id="btn1">버튼</button>
<div id="div1"></div>
<script>
document.querySelector("#btn1").addEventListener("click", function () {
let obj1 = document.getElementsByName("radio");
let text = document.createElement("p");
for (const i of obj1) {
if (i.checked) {
text.textContent = `다음 식사 메뉴는 ${i.value}`;
document.querySelector("#div1").append(text);
}
}
});
</script>
</body>
</html>
.selected
select태그에서 선택된 항목의 경우 true, 아니면 false를 반환한다. 아래 예시는 option #green이 선택되었을 경우 true를 반환된다는 점을 이용하여, if문을 사용해서 true일 경우는 정답입니다를 반환, false일 경우 오답입니다를 반환했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h3>다음 중 내가 좋아하는 색깔은?</h3>
<select name="color" id="color">
<option value="red">빨간색</option>
<option value="blue">파란색</option>
<option value="green" id="green">초록색</option>
<option value="yellow">노란색</option>
<option value="orange">주황색</option>
<option value="purple">보라색</option>
</select>
<button id="btn1">색깔등록</button>
<div id="div1"></div>
<script>
document.querySelector("#btn1").addEventListener("click", function () {
if (document.querySelector("#green").selected) {
let text = document.createElement(`p`);
text.textContent = "정답입니다!";
text.style.color = "white";
document.querySelector("#div1").append(text);
let favorite = document.querySelector("#color").value;
document.querySelector("#div1").style.backgroundColor = `${favorite}`;
} else {
let text = document.createElement(`p`);
text.textContent = "오답입니다!";
document.querySelector("#div1").append(text);
}
});
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript : sort()와 localeCompare()을 이용해 정렬해보자 (0) | 2024.07.29 |
|---|---|
| JavaScript의 특징: 스코프와 실행 컨텍스트 (0) | 2024.07.29 |
| JavaScript : DOM에서 class를 설정해보자 (0) | 2024.07.29 |
| JavaScript : DOM의 이벤트를 설정해보자 (0) | 2024.07.29 |
| JavaScript에서 this는 무엇을 가리키는걸까? (0) | 2024.07.29 |
| JavaScript : DOM을 통해 속성을 조작해보자 (0) | 2024.07.27 |
| JavaScript : DOM에서 요소를 조작해보자 (0) | 2024.07.25 |
| JavaScript : DOM의 기본에 대하여 (0) | 2024.07.25 |