note

이벤트 연결 본문

JavaScript/기본

이벤트 연결

투한 2012. 3. 19. 09:29 

















<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload = function () {
		//문서 객체를 가져옵니다.
		var buttonA = document.getElementById('button_a');
		var buttonB = document.getElementById('button_b');
		var counterA = document.getElementById('counter_a');
		var counterB = document.getElementById('counter_b');
		
		//이벤트를 연결합니다.
		buttonA.onclick = function () {
			counterA.innerHTML = Number(counterA.innerHTML)+ 1;
		};
		buttonB.onclick = function () {
			counterB.innerHTML = Number(counterB.innerHTML)+ 1;
		};
	};
</script>
</head>
<body>
	<button id="button_a">ButtonA</button>
	<button id="button_b">ButtonB</button>
	<h1>Button A - <span id="counter_a">0</span></h1>
	<h1>Button B - <span id="counter_b">0</span></h1>
</body>
</html>


innerHTML을 이용해서 카운터를 증가시켜 view 시킴

span 안에 있는 0을 읽어와 +1 시키고 다시 넣어준다

그래서 증가시켜서 보임 


저작자표시 비영리 변경금지 (새창열림)

'JavaScript > 기본' 카테고리의 다른 글

표준 이벤트 모델  (0) 2012.03.19
입력양식의 유효성 검사  (0) 2012.03.19
이벤트 객체  (0) 2012.03.16
이벤트 발생 객체의 스타일 변경  (0) 2012.03.16
이벤트 핸들러 안에서 this 키워드  (0) 2012.03.16
'JavaScript/기본' Related Articles more