[ Java Script ] DOM 활용하여 폼 작성하기
2022. 2. 21. 20:48ㆍJava Script
< 실행 영상 >
< 코드 1 >
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input[type="radio"]:checked+label { /* 1. + 인접선택자를 활용 2. setAttribute(),... */
color: red;
}
textarea {
width: 100%;
}
</style>
</head>
<body>
<fieldset>
<legend>라디오버튼</legend>
<input type="radio" name="grade" value="1"><label>1학년
</label> <input type="radio" name="grade" value="2"><label>2학년
</label> <input type="radio" name="grade" value="3"><label>3학년
</label>
</fieldset>
<fieldset>
<legend>선택박스</legend>
<select>
<option selected value="0">-</option>
<option value="1">HTML</option>
<option value="2">CSS</option>
<option value="3">JavaScript</option>
</select>
</fieldset>
<fieldset>
<legend>선택한 결과 출력화면</legend>
<textarea id="content"></textarea>
</fieldset>
<script type="text/javascript">
var sel = document.querySelectorAll('input[name="grade"]');
var content = document.getElementById('content');
for (var i = 0; i < sel.length; i++) {
sel[i].onchange = function() {
content.value = this.value;
}
}
document.querySelector('select').onchange=function(){
content.value = this.value;
}
</script>
</body>
</html>
< 코드 2 >
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input[type="radio"]:checked+label { /* 1. + 인접선택자를 활용 2. setAttribute(),... */
color: red;
}
textarea {
width: 100%;
}
</style>
</head>
<body>
<fieldset>
<legend>라디오버튼</legend>
<input type="radio" name="grade" value="1"><label>1학년
</label> <input type="radio" name="grade" value="2"><label>2학년
</label> <input type="radio" name="grade" value="3"><label>3학년
</label>
</fieldset>
<fieldset>
<legend>선택박스</legend>
<select>
<option selected value="0">-</option>
<option value="1">HTML</option>
<option value="2">CSS</option>
<option value="3">JavaScript</option>
</select>
</fieldset>
<fieldset>
<legend>선택한 결과 출력화면</legend>
<textarea id="content"></textarea>
</fieldset>
<script type="text/javascript">
var sel = document.querySelectorAll('input[name="grade"]');
var check = document.querySelector('select');
var content = document.getElementById('content');
for (var i = 0; i < sel.length; i++) {
sel[i].onchange = function() {
for(var j=0;j<check.options.length;j++){
// option들 중에서 radio버튼과 순서가 같은 option을 selected상태로 변경!
if(check.options[j].value==this.value){
check.options[j].selected=true;
}
}
content.value = this.value;
}
}
check.onchange=function(){
for(var k=0;k<sel.length;k++){
// select의 변경이 감지되면, radio버튼과 순서가 같은지 확인.해당 버튼을 checked상태로 변경!
sel[k].checked=false;
if(sel[k].value==this.value){
sel[k].checked=true;
}
}
content.value = this.value;
}
</script>
</body>
</html>'Java Script' 카테고리의 다른 글
| [ Java Script ] document.getElementsByTagName (0) | 2022.02.21 |
|---|---|
| [ Java Script ] document.getElementById (0) | 2022.02.21 |
| [ Java Script ] 마우스 이벤트 활용하여 색 변경 하기 (0) | 2022.02.21 |
| [ Java Script ] D-day 계산 프로그램 만들기 (0) | 2022.02.18 |
| [ Java Script ] 숫자 업다운 게임 하기 (0) | 2022.02.18 |