【JavaScript】指定回数以上クリックされたら処理を実行する方法

Webサイトで特定の要素を何回かクリックした後に処理を実行したい場面は意外と多くあります。例えば、隠し機能を実行したり、ボタンの誤操作を防止したりといった用途です。この記事では、JavaScriptを使って「指定回数以上クリックされたら処理を実行する方法」について解説します。

クリック回数をカウントする基本構造

まずは、ボタンがクリックされた回数を記録し、それが特定の数に達したときだけ処理を行う基本のコードを見てみましょう。

<button id="secretBtn">クリックしてみて</button>
<p id="message"></p>

const button = document.getElementById('secretBtn');
const message = document.getElementById('message');

let clickCount = 0;
const threshold = 5; // 5回クリックされたら処理を実行

button.addEventListener('click', () => {
  clickCount++;

  if (clickCount >= threshold) {
    message.textContent = '隠し機能が起動しました！';
    clickCount = 0; // カウントをリセットする場合
  }
});

このコードでは、ボタンがクリックされるたびにclickCountが1ずつ増えていきます。5回以上になると、メッセージを表示し、その後カウントを0にリセットしています。

リセットしないバージョン

一度限りの処理を実行したい場合、カウントのリセットを行わず、フラグで処理済みかどうかを管理すると良いでしょう。

let clickCount = 0;
let hasTriggered = false;

button.addEventListener('click', () => {
  if (hasTriggered) return;

  clickCount++;

  if (clickCount >= threshold) {
    message.textContent = '一度だけの隠し処理が実行されました。';
    hasTriggered = true;
  }
});

このようにすることで、処理は1度しか実行されず、それ以降のクリックでは何も起こりません。

実用例 隠しリンクの表示

クリック回数が一定に達したときだけ、特別なリンクを表示するような使い方も可能です。

<a href="#" id="secretLink" style="display: none;">ここをクリックすると秘密のページへ</a>

if (clickCount >= threshold) {
  const link = document.getElementById('secretLink');
  link.style.display = 'inline';
}

まとめ

クリック回数をカウントして処理を制御することで、ユーザーの意図を確認したり、隠し要素を用意したりすることが可能になります。JavaScriptの基本的な構文を活用するだけで実装できるため、ぜひさまざまなアイデアに応用してみてください。