Vanilla JavaScriptで要素のクリック数をカウントする方法

要素のクリック数をカウントするのは、JavaScriptで実装できる最もシンプルな処理のひとつです。必要なのは、クリック数を保存するための変数を宣言することと、対象の要素に対してaddEventListenerメソッドを使用することだけです。

ここでは、ボタン要素(例えばホームボタン)がクリックされた回数を追跡したいケースを例に、具体的な手順を解説します。

HTMLマークアップ

まず、button要素を作成し、button-homeというクラスを付与します。

<button class="button-home">Home</button>

JavaScript

次に、以下のコードをJavaScriptファイルに追加してください(コードの詳細な解説は後述します)。

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

実行結果

上記のボタン要素には、クリックしやすいようCSSで少しスタイリングを加えています。

JavaScriptコードの解説

• まず、querySelector()メソッドを使ってbutton要素のbutton-homeクラスを選択し、buttonHome変数に代入します。
• 次に、クリック数を保存するためのCountButtonHomeClicks変数を宣言し、初期値として0を設定します。
• 続いて、addEventListener()メソッドを使って、buttonHomeにイベントリスナーを登録します。
• イベントリスナーの中では、'click'イベントを監視し、クリックイベントが発生するたびにfunction()を実行するよう指定しています。
• 関数の中では、クリックイベントが発生するたびにCountButtonHomeClicks変数へ1を加算します。加算には+=(プラスイコール)演算子を使用します。
• 最後に、console.log()を使ってCountButtonHomeClicks変数の値を出力し、各クリックイベントを記録します。

これで、特定の要素のクリック数をカウントする方法を習得できました。

知っておくと良いポイント

• 上記のコードはES6構文を使用しています。ES5環境の場合は、letをvarに置き換えるだけで同じように動作します。
• この例で使用している関数は、名前を持たないことから無名関数(匿名関数)と呼ばれます。関数式や関数宣言とは異なる種類の関数です。
• 無名関数は再利用できません。複数のイベントで同じ関数を呼び出したい場合は、関数式または関数宣言を使用しましょう。

コード一式を入手する

本記事で紹介したすべてのコードは、CodePenでも公開しています。実際に動かしながら挙動を確認してみてください。