onclick get, set 사용
<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
function get() {
var val = document.getElementById("ex").innerHTML;
alert(val);
}
function set(v) {
document.getElementById("ex").innerHTML = v;
}
</script>
</head>
<body>
<div id="ex"> 여기가 div로 선언되었습니다. </div>
<a href="#" onclick="get()">div 요소 내용 출력하기</a>
<a href="#" onclick="set('변경되었습니다.')">div 요소 내용 변경하기</a>
</body>
</html>
- innerHTML을 사용하면 element 내부의 html이 받아진다.
function과 form 태그
<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
function calc(type) {
x = Number(document.calculator.number.value);
if(type==1) {
y = Math.sin(x);
}else if(type==2) {
y = Math.log(x);
}else if(type==3) {
y = Math.sqrt(x);
}else if(type==4) {
y = Math.abs(x);
}
document.calculator.total.value = y;
}
</script>
</head>
<body>
<form name="calculator">
입력: <input type="text" name="number"> <br>
계산결과: <input type="text" name="total"><br>
<input type="button" value="SIN" onclick="calc(1);">
<input type="button" value="LOG" onclick="calc(2);">
<input type="button" value="SQRT" onclick="calc(3);">
<input type="button" value="ABS" onclick="calc(4);">
</form>
</body>
</html>
function 활용 2
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>!회원가입!</title>
<style>
#rap {
text-align: center;
}
/* border-collapse 표의 테두리와 셀의 테두리 사이의 간격을 어떻게 처리
기본값 : separate
inherit : 부모 요소의 속성값을 상속받는다.
separate : td와 테두리 사이의 간격을 둡니다.
collapse: td와 테두리 사이의 간격을 없앤다. 겹치는 부분을 한줄로 나타냅니다.
*/
table {
width: 80%;
margin: auto;
border-collapse: collapse;
}
body, td, input {
font-family: Verdana, sans-serif;
font-size: 13px;
padding: 4px;
}
.box {
border: 1px solid;
}
</style>
</head>
<body>
<script>
function checkNotEmpty(field) {
if (field.value.length == 0) {
alert("필드가 비어있습니다.");
field.focus();
return false;
}
return true;
}
function checkLength(elem, min, max) {
var s = elem.value;
if(s.length >= min && s.length <= max) {
return true;
}else {
alert(min + "문자와 " + max + "문자 사이로 입력해주세요!");
elem.focus();
}
}
function checkValidPassword(elem1, elem2) {
var s1 = elem1.value;
var s2 = elem2.value;
if(s1 == s2) {
var str = "<font color=green>비밀번호가 확인되었습니다.</font>";
document.getElementById("unvalidPasswordAlert").innerHTML = str;
}
else {
var str = "<font color=red>비밀번호가 서로 다릅니다.</font>";
document.getElementById("unvalidPasswordAlert").innerHTML = str;
elem2.focus();
}
}
</script>
<div id="rap">
<h1>Join Page</h1>
<form name = "frm">
<table border="1">
<tr>
<td colspan="2" class="m3">
<h3>회원가입</h3>
</td>
</tr>
<tr>
<td class="m1">
*이름
</td>
<td>
<input type="text" name="name" id="user" class="box">
<button type="button" onclick="checkNotEmpty(document.getElementById('user'))">확인</button>
<span class="m2">(예:홍길동)</span>
</td>
</tr>
<tr>
<td class="m1">
*아이디
</td>
<td>
<input type="text" name="uid" id="uid" class="box">
<button type="button" onclick="checkLength(document.getElementById('uid'),4,12)">중복확인</button>
<br>
<span class="m2">
(4~12자 영문/숫자 가능, 한글, 특수문자 ID는 사용할 수 없습니다.)
</span>
</td>
</tr>
<tr>
<td class="m1">
*비밀번호 입력
</td>
<td>
<input type="text" name="password1" id="password1" class="box">
</td>
</tr>
<tr>
<td class="m1">
*비밀번호 확인
</td>
<td>
<input type="text" name="password2" id="password2" class="box">
<button type="button" onclick="checkValidPassword(
document.getElementById('password1'),
document.getElementById('password2'))">확인</button>
<br>
<p id="unvalidPasswordAlert"></p>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>