요소에 대한 클릭 수를 계산하는 것은 JavaScript로 할 수 있는 가장 쉬운 일 중 하나입니다. 클릭을 저장할 변수를 선언한 다음 대상 요소에서 addEventListener 메서드를 사용하기만 하면 됩니다.
버튼 요소의 클릭 수를 추적하고 싶다고 가정해 보겠습니다. 홈 버튼.
HTML 마크업
HTML 버튼 요소를 만들고 버튼 홈 클래스를 지정합니다.
<button class="button-home">Home</button>자바스크립트
JavaScript 파일에 다음 코드를 추가합니다(아래에서 코드 설명).
let buttonHome = document.querySelector(".button-home")
let CountButtonHomeClicks = 0
buttonHome.addEventListener("click", function() {
CountButtonHomeClicks += 1
console.log(CountButtonHomeClicks)
})결과:
위의 버튼 요소에 약간의 CSS 스타일을 추가하여 적중하기 쉽도록 했습니다.
자바스크립트 코드에서 일어나는 일:
- 먼저
querySelector()를 사용합니다.button-home을 선택하는 메소드 버튼 요소의 클래스. 그런 다음buttonHome에 할당합니다. 변수. - 그런 다음
CountButtonHomeClicks를 선언합니다. 향후 클릭을 저장할 변수입니다. 기본 초기값은 0입니다. - 그런 다음
addEventListener()를 사용하여 이벤트 리스너를 buttonHome에 연결합니다. 방법. - 이벤트 리스너 내에서
'click'을 수신하도록 지정합니다. 이벤트 및 우리가 실행하려는function()모든 클릭 이벤트에서. - 함수 내에서
CountButtonHomeClicks에 1을 추가하도록 지정합니다. 클릭 이벤트가 트리거될 때마다 변수. 1을 추가하려면+=를 사용합니다. (더하기 등호) 연산자. - 마지막으로
console.log()를 사용하여 각 클릭 이벤트를 기록합니다.CountButtonHomeClicks변수.
이제 특정 요소에 대한 클릭수를 계산하는 방법을 알게 되었습니다.
알아두면 좋은 정보:
- 위의 코드는 ES6 구문을 사용하고 있습니다. ES5를 사용하는 경우
let을 바꾸세요.var사용 동일하게 작동합니다. - 이 예에서 사용하는 함수 유형을 익명 함수라고 합니다. 함수 표현식과 달리 이름이 없기 때문입니다. 및 함수 선언
- 익명 기능은 재사용할 수 없습니다. 여러 이벤트에서 동일한 함수를 호출해야 하는 경우 함수 표현식이나 함수 선언을 사용하세요.
다음은 위의 모든 코드가 포함된 CodePen입니다.