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

Nithin Krishnan 2023年10月12日
  1. JavaScript を使用してボタンのカウンターをクリックする
  2. JavaScript を使用して div のカウンターをクリックする
  3. クリックカウンター-邪魔にならないアプローチ
  4. 備考
JavaScript を使用してシンプルなクリックカウンターを作成する

クリックカウンターはクリック数を記録し、画面に表示します。カウンターは、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 ずつインクリメントします。手順は次のとおりです。

  • HTML で <h3> タグを使用してカウンター表示を作成し、それに ID counter-label を割り当てて、document.getElementById() によって JavaScript コードから更新できるようにします。javascript の関数。
  • HTML には、いくつかのボタンも追加しています。Click Me テキストが付いた 1つのボタン。クリックすると、カウンター値が 1 増加します。同様に、もう 1つのボタンには、カウンターを 0 にリセットするリセットテキストが HTML にあります。
  • クリックしてくださいボタンをクリックすると、カウンター値をインクリメントする必要があります。そのために、onclick イベントリスナーを使用します。そして、Click Me ボタンをクリックして、incrementClick() 関数をトリガーします。
  • incrementClick() 関数内で、グローバル変数 counterVal を 1 インクリメントし、updateDisplay 関数を呼び出します。
  • リセットボタンをクリックすると、resetCounter() 関数が呼び出されます。この関数では、グローバルカウンター値(counterVal)を 0 にリセットし、updateDisplay() 関数を呼び出します。
  • updateDisplay() 関数では、パラメーターとして受け取った値を、カウンター値を保持する <h3> タグに表示します。javascript の document.getElementById() 関数を使用して、ID counter-label の HTML 要素を照会し、innerHTML 属性を新しいカウンター値で更新します。innerHTML 属性は、HTMLGUI インターフェイスに表示されるテキストをさらに変更します。

上記のコードサンプルは、クリックカウンターを表示し、ボタンをクリックするとそれをインクリメントします。ほとんどのユースケースでは、ボタンに常にクリックカウンターを適用するとは限りません。柔軟性を持たせるには、divli などの他の 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() 関数でクエリできるようになります。