Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

Vanilla JavaScript로 요소에 대한 클릭 수를 계산하는 방법

요소에 대한 클릭 수를 계산하는 것은 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);
});

결과:

Vanilla JavaScript로 요소에 대한 클릭 수를 계산하는 방법

위의 버튼 요소에 약간의 CSS 스타일을 추가하여 적중하기 쉽도록 했습니다.

자바스크립트 코드에서 일어나는 일:

  • 먼저 querySelector()를 사용합니다. button-home을 선택하는 메소드 버튼 요소의 클래스입니다. 그런 다음 buttonHome에 할당합니다. 변수.
  • 그런 다음 CountButtonHomeClicks를 선언합니다. 향후 클릭을 저장할 변수입니다. 기본 초기값은 0입니다.
  • 그런 다음 addEventListener()를 사용하여 이벤트 리스너를 buttonHome에 연결합니다. 방법.
  • 이벤트 리스너 내에서 'click'을 수신하도록 지정합니다. 이벤트 및 우리가 실행하려는 function() 모든 클릭 이벤트에서.
  • 함수 내에서 CountButtonHomeClicks에 1을 추가하도록 지정합니다. 클릭 이벤트가 트리거될 때마다 변수. 1을 추가하려면 +=를 사용합니다. (더하기 등호) 연산자.
  • 마지막으로 console.log()를 사용하여 각 클릭 이벤트를 기록합니다. CountButtonHomeClicks 변수.

이제 특정 요소에 대한 클릭수를 계산하는 방법을 알게 되었습니다.

알아두면 좋은 정보:

  • 위의 코드는 ES6 구문을 사용하고 있습니다. ES5를 사용하는 경우 let을 바꾸세요. var 사용 동일하게 작동합니다.
  • 이 예에서 사용하는 함수 유형을 익명 함수라고 합니다. 함수 표현식과 달리 이름이 없기 때문입니다. 및 함수 선언
  • 익명 기능은 재사용할 수 없습니다. 여러 이벤트에서 동일한 함수를 호출해야 하는 경우 함수 표현식이나 함수 선언을 사용하세요.

코드 받기

위의 모든 코드가 포함된 CodePen이 있습니다.