JavaScript を使用してシンプルなクリックカウンターを作成する

1. JavaScript を使用してボタンのカウンターをクリックする
2. JavaScript を使用して div のカウンターをクリックする
3. クリックカウンター-邪魔にならないアプローチ
4. 備考

クリックカウンターはクリック数を記録し、画面に表示します。カウンターは、JavaScript の click イベントを使用してカウンター値をインクリメントします。ゲーム（ポイントやスコア値を上げるため）や時間節約のハックなど、さまざまな分野で使用できます。JavaScript で単純なクリックカウンターを作成するコードを見てみましょう。

JavaScript を使用してボタンのカウンターをクリックする

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <button onclick="incrementClick()">Click Me</button>
        <button onclick="resetCounter()">Reset</button>
    </div>
</center>

var counterVal = 0;

function incrementClick() {
  updateDisplay(++counterVal);
}

function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}

function updateDisplay(val) {
  document.getElementById('counter-label').innerHTML = val;
}

コードでは、ユーザーがクリックするたびに、カウンター変数 counterVal の値を 1 ずつインクリメントします。手順は次のとおりです。

上記のコードサンプルは、クリックカウンターを表示し、ボタンをクリックするとそれをインクリメントします。ほとんどのユースケースでは、ボタンに常にクリックカウンターを適用するとは限りません。柔軟性を持たせるには、div、li などの他の HTML 要素の機能をサポートする必要があります。ほとんどすべての HTML 要素には、onclick イベントハンドラーを備えた click イベントがあります。

JavaScript を使用して div のカウンターをクリックする

ゲームでは、シーンにカウンターの増分をトリガーするボタンが常にあるとは限りません。ほとんどの場合、div のような HTML 要素で構成されている可能性があります。このような場合、div タグの onclick イベントハンドラーを使用して、カウンター値をインクリメントするためのクリックをキャプチャできます。次のコードサンプルを参照してください。

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <div onclick="incrementClick()">Click Me</div>
        <button onclick="resetCounter()">Reset</button>
    </div>
</center>

var counterVal = 0;

function incrementClick() {
  updateDisplay(++counterVal);
}

function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}

function updateDisplay(val) {
  document.getElementById('counter-label').innerHTML = val;
}

この例では、<div onclick="incrementClick()">Click Me</div> の行で div を使用していることがわかります。この変更により、ボタンではなく div をクリックすると incrementClick() がトリガーされます。このコードは、<li>、<a>、<div> などの HTML タグでも正常に機能します。onclick イベントハンドラーをサポートするほとんどすべての HTML タグは、onclick リスナーに関連付けることができ、同様に機能します。

クリックカウンター-邪魔にならないアプローチ

JavaScript で遮るもののないアプローチでクリックカウンターを実装する場合は、HTML の onclick イベントハンドラーを削除して、JavaScript コードに移動する必要があります。ただし、コード構造は少し異なります。次のサンプルコードを確認してください。

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <div id="click-div">Click Me</div>
        <button id="reset-button">Reset</button>
    </div>
</center>

window.onload =
    function() {
  let clickDiv = document.getElementById('click-div');
  clickDiv.onclick = incrementClick;

  let resetBtn = document.getElementById('reset-button');
  resetBtn.onclick = resetCounter;
}

var counterVal = 0;

incrementClick =
    function() {
  updateDisplay(++counterVal);
}

function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}

function updateDisplay(val) {
  document.getElementById('counter-label').innerHTML = val;
}

ここでは、クリックイベントを JavaScript コードにバインドします。構造は同じですが、Click Me div と Reset ボタンの onclick リスナーを使用する点が異なります。このバインディングは実行時に行われます。そして、そのクリックリスナーに、定義された関数をバインドします。したがって、コードは似ており、多くの変更はありません。

備考

遮るもののないアプローチの違いは、HTML で行うのではなく、javascript コードで onclick リスナーをバインドすることです。ボタンまたは div に onclick イベントハンドラーが割り当てられている場合、HTML だけで理解するのは困難です。

このアプローチでは、すべての onclick イベントがバインドされて JavaScript で処理されるため、コードはすっきりと見えます。JavaScript コードが HTML に侵入しないため、マークアップを使用して HTML をクリーンに保ちます。

window.onload 関数内で onclick リスナーを設定しないと、コードは機能しません。document.getElementById("click-div") コードは、HTML 要素を見つけることができないため、null を返します。wondow.onload 関数は、ウィンドウがロードされ、DOM の準備ができるとトリガーされます。したがって、コードを window.onload ブロック内に配置することで、HTML 要素が確実に読み込まれ、JavaScript の document.getElementById() 関数でクエリできるようになります。