본문 바로가기

나는개발자다!!/javascript&제이쿼리

자바스크립트 변수를 활용한 카운팅 썰

페이지 내에서 버튼 클릭 시 마다 변수를 1씩 증가시키는 예제



버튼 카운팅 예제

버튼을 누를때마다 카운팅됩니다.


코드는 다음과 같습니다.

 - 페이지 내에서 카운팅에 사용할 변수를 하나 선언해주고

 - 버튼이 클릭될 때마다 이 변수의 값을 1씩 증가시켜줍니다.

 - 응용하면 빼는 것도 가능하겠죠?

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<script type="text/javascript">
var overlap_cnt = 0; //페이지 변수 설정
function setCnt() {
overlap_cnt++;
document.getElementById("cnt_result").innerHTML = overlap_cnt;
}
</script>

<body>
<h1>버튼 카운팅 예제</h1>
<h3>버튼을 누를때마다 카운팅됩니다.</h3>

<button onclick="setCnt()">버튼클릭</button>

<p id="cnt_result"></p>
</body>

</html>