<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
border: 2px solid gray;
width: 500px;
}
tr,th,td {
border: 1px dotted gray;
font-size: 10pt;
}
div {
position: absolute;
left: 10px;
top: 300px;
width: 500px;
height: 200px;
border: 1px solid gray;
padding: 20 10px;
}
</style>
<script type="text/javascript">
////////////////////////버튼 클릭 이벤트
function disp() {
//radiobox
var gradeStr="나의 최종학력은 "; //초기값
for(var i=0; i<frm.grade.length; i++)
{
if (frm.grade[i].checked) {
gradeStr+=frm.grade[i].value+"입니다<br>"
}
}
out.innerHTML+="최종학력: "+gradeStr;
//checkbox
var langStr="나의 가능한 언어는 ";
var flag=false; //아무것도 선택 안 할수 있기에 초기값 false
for(var i=0; i<frm.lang.length; i++)
{
//선택이 되면 value값을 읽어서 langStr에 추가
if(frm.lang[i].checked){
flag=true; //체크한 게 있으니 flag를 true로 변경
langStr+=frm.lang[i].value+" ";
}
}
//lang을 하나도 선택 안 하면 초기값은 그대로 false가 된다
if(!flag)
{
langStr="가능한 언어가 없습니다<br>";
} else {
langStr+="입니다<br>";
}
out.innerHTML+="가능언어: "+langStr;
//select
out.innerHTML+="반장투표: "+frm.vote.value+"<br>";
out.innerHTML+="키: "+frm.height.value+"cm<br>";
out.innerHTML+="몸무게: "+frm.weight.value+"kg<br>";
out.innerHTML+="날짜: "+frm.day.value;
out.style.background=frm.col.value;
}
//////////////////////////div 초기화
function init(){
out.innerHTML="";
}
//해당 행에서 onchange()적용하여 span태그에 출력
function goHeight(num) {
/* innerHtml과 innerText는 비슷하나 텍스트만 넘어가는 게 다름 */
document.getElementById("out1").innerText=num;
}
function goDate(day) {
document.getElementById("out2").innerText=day;
}
</script>
</head>
<body>
<!-- 결과물출력용 -->
<div id="out"></div>
<form action="#" name="frm">
<table>
<caption>Radio & Check</caption>
<tr height="30">
<td>
<b>최종학력 선택</b>
<!-- 한칸 띄기 -->
<!-- radiobox는 name이 동일해야 함 -->
<input type="radio" name="grade" value="고등학교">고등학교
<input type="radio" name="grade" value="전문대학">전문대학
<input type="radio" name="grade" value="4년제대학">4년제대학
<input type="radio" name="grade" value="대학원">대학원
</td>
</tr>
<tr>
<td>
<b>본인이 가능한 프로그램 언어 선택</b>
<!-- checkbox는 중복 가능 -->
<input type="checkbox" name="lang" value="C언어">C언어
<input type="checkbox" name="lang" value="Java">Java
<input type="checkbox" name="lang" value="Jsp">Jsp
<input type="checkbox" name="lang" value="Oracle">Oracle
</td>
</tr>
<tr>
<td>
<b>우리반의 반장 투표</b>
<select size="1" name="vote">
<option value="주연">주연</option>
<option value="성준">성준</option>
<option value="현주">현주</option>
<option value="영주">영주</option>
<option value="미주">미주</option>
<option value="세찬">세찬</option>
<option value="준하" selected="준하">준하</option>
<!-- selected="준하" : 처음 선택값 -->
</select>
</td>
</tr>
<tr>
<td>
<b>본인의 키 선택</b>
<input type="number" name="height" min="150" max="210" step="2" value="150"
onchange="goHeight(this.value)">cm
<span id="out1">0</span>cm
</td>
</tr>
<tr>
<td>
<b>본인의 몸무게 선택</b>
<input type="number" name="weight" min="40" max="150" step="2" value="50">kg
</td>
</tr>
<tr>
<td>
<b>색상 선택</b>
<input type="color" name="col">
</td>
</tr>
<tr>
<td>
<b>날짜 선택</b>
<input type="date" name="day" onchange="goDate(this.value)">
<span id="out2"></span>
</td>
</tr>
<tr align="center">
<td>
<input type="button" value="결과출력" onclick="disp()">
<input type="reset" value="초기화" onclick="init()">
</td>
</tr>
</table>
</form>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 210924_(랜덤숫자맞추기)innerHTML,이미지 (0) | 2021.09.24 |
|---|---|
| 210924_setTimeout,setInterval,버튼,이미지 (0) | 2021.09.24 |
| 210924_배열,랜덤숫자-이미지(연결되어 출력) (0) | 2021.09.24 |
| 210924_배열,랜덤이미지 (0) | 2021.09.24 |
| 210924_배열,이미지출력 (0) | 2021.09.24 |