innerHTMLEx1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function test(n){
var code = ""; //code변수를 id가 tt인 객체에게 넣어 주기 위함
switch(n){
case 0:
code="<font color='blue'><b>Servlet/JSP</b></font>";
break;
case 1:
code="<font color='orange'><b>Struts</b></font>";
break;
case 2:
code="<font color='green'><b>iBATIS</b></font>";
break;
case 3:
code="<font color='blue'><b>Ajax</b></font>";
break;
case 4:
code="<font color='steelblue'><b>RFID</b></font>";
break;
} //end switch
//code 를 넣을 tt라는 아이디를 가진 객체를 얻어낸다.
var tt = document.getElementById("tt");
tt.innerHTML = code;
}
</script>
</head>
<body>
<p id="tt">
</p>
<input type="button" value="Servlet/JSP" onClick="test(0)"/>
<input type="button" value="Struts" onClick="test(1)"/>
<input type="button" value="iBATIS" onClick="test(2)"/>
<input type="button" value="Ajax" onClick="test(3)"/>
<input type="button" value="RFID" onClick="test(4)"/>
</body>
</html>
결과
buttonTest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function test(obj){
var str = obj.value;
var code = "<font color='red'><b>"+str+"</b></font>";
var tt=document.getElementById("tt");
tt.innerHTML = code;
}
</script>
</head>
<body>
<p id = "tt">
</p>
<input type="button" value="첫번째" onclick="test(this)">
<input type="button" value="두번째" onclick="test(this)">
</body>
</html>
결과
'Programing > Ajax' 카테고리의 다른 글
| Ajax - suggest (0) | 2008.07.29 |
|---|---|
| Ajax - DB 값 빼오기 (0) | 2008.07.29 |
| Ajax - innerHTML (0) | 2008.07.29 |
| Ajax - 비동기식? (0) | 2008.07.29 |
| Ajax - Ajax(dwr)와 iBatis를 사용해서 DB에서 정보 가져오기 (0) | 2008.07.29 |
