JavaScript を使用してシンプルなクリックカウンターを作成する
![JavaScript を使用してシンプルなクリックカウンターを作成する](/img/JavaScript/feature-image---simple-click-counter-using-javascript.webp)
クリックカウンターはクリック数を記録し、画面に表示します。カウンターは、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>
タグを使用してカウンター表示を作成し、それに IDcounter-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()
関数を使用して、IDcounter-label
の HTML 要素を照会し、innerHTML 属性を新しいカウンター値で更新します。innerHTML
属性は、HTMLGUI インターフェイスに表示されるテキストをさらに変更します。
上記のコードサンプルは、クリックカウンターを表示し、ボタンをクリックするとそれをインクリメントします。ほとんどのユースケースでは、ボタンに常にクリックカウンターを適用するとは限りません。柔軟性を持たせるには、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()
関数でクエリできるようになります。