Programming language/Javascript,jQuery

[Javascript]document.getElementById() - (1)

JQuery를 마지막으로 사용해서인지 자바스크립트 일부 속성을 간혹 까먹는다. 안타깝게도 입사 후 JQuery기반은 지금껏 만져본 적이 없다..

그래서 이번에 가장 많이 쓴(?) document.getElementById() 속성을 기록해두려고 한다.

document.getElementById('ID값')

document.getElementById('LSH')는 id값이 LSH인 HTML 요소를 가져온다. 이렇게 가져온 id값을 통해 라디오 박스 또는 셀렉트 옵션값 설정, 특정 값 입력, 스타일 변경 등 다양한 행위를 할 수 있게 된다.

먼저 innerHTML에 대해 소개한다.

innerHTML은 내부 HTML을 문자열로 가지고 있기 때문에 DOM을 쉽게 조작할 수 있다. ☞ DOM이란?

쉽게 innerHTML은 가져온 id값의 내용을 변경해주는 기능을 한다.

아래 코드를 보자.

각각의 버튼에서 onclick 이벤트가 발생하면 함수를 타고 switch-case문에 따라서 p 태그의 id가 in_time과 out_time에 값을 입력해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%@page language="java" contentType="text/html; charset=euc-kr"%>
<html>
<head>
<title></title>
<script>    
function OnChange(e)
{    
    var gubun = e;
    switch(gubun)
    {
      case "in":
      {
        document.getElementById('in_time').innerHTML = "09:00";         
        break;
      }        
      case "out":
      {
        document.getElementById('out_time').innerHTML = "18:00";       
        break;
      }
    }
}
</script>
</head>
<body>
<form name=f1 style=margin:0; onsubmit="return false;" >
    <input type="button" value="출근" onclick="OnChange('in');"><p id="in_time"></p>
    <input type="button" value="퇴근" onclick="OnChange('out');"><p id="out_time"></p>
</form>
</body>
</html>
 
 
 
Colored by Color Scripter
cs

<결과>

<버튼 클릭 시>

나머지는 다음 편에서...

저작자표시 비영리 변경금지

'Programming language > Javascript,jQuery' 카테고리의 다른 글

[Javascript]id값 가져오기 (0)	2018.06.25
[Javascript]document.getElementById() - (2) (0)	2018.06.22
[Javascript]SELECT(OPTION) 조작하기 (0)	2018.06.03
[IBSheet]CellValue와 GetSelectionRows() (2)	2018.05.10
[JQuery+Ajax]좋아요 기능 구현 - (2) (2)	2018.05.01

Contents

새소식

[Javascript]document.getElementById() - (1)

'Programming language > Javascript,jQuery' 카테고리의 다른 글

연관 포스팅

티스토리툴바