JavaScript로 버튼 클릭 여부 확인하기
JavaScript에서는 addEventListener() 메서드를 사용하여 버튼이 클릭되었는지 쉽게 감지할 수 있습니다. 버튼 요소에 'click' 이벤트 리스너를 등록하면, 사용자가 버튼을 클릭할 때마다 지정한 함수가 실행됩니다.
아래 예제에서는 버튼이 클릭될 때마다 클릭 횟수를 세어 화면에 실시간으로 표시합니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body onbeforeunload="return pageUnload()">
<h1>Checking whether a Button is clicked using JavaScript</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to check if the button is clicked</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
let clickCount = 0;
BtnEle.addEventListener("click", () => {
clickCount++;
resEle.innerHTML =
"The button has been clicked " + clickCount + " times ";
});
</script>
</body>
</html>
코드 설명
- document.querySelector(): 클래스 이름이 'Btn'인 버튼 요소와 결과를 표시할 '.result' 요소를 각각 선택합니다.
- clickCount 변수: 버튼이 클릭된 횟수를 저장하며, 초기값은 0입니다.
- addEventListener("click", 콜백): 버튼이 클릭될 때마다 콜백 함수가 실행되어 clickCount가 1씩 증가하고, 결과 영역에 클릭 횟수가 출력됩니다.
출력 결과
페이지를 실행하면 다음과 같은 화면이 나타납니다.
버튼을 5번 클릭하면 아래 그림처럼 클릭 횟수가 화면에 표시됩니다.
