使用 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>標籤的計數器顯示，併為其分配一個 idcounter-label，以便它可以通過document.getElementById()從 javascript 程式碼中更新 javascript 中的函式。 -
在 HTML 中，我們還新增了幾個按鈕。一個帶有
Click Me文字的按鈕，點選後計數器值增加1。類似地，在另一個按鈕中，我們在 HTML 中有一個Reset文字，它將計數器重置為0。 -
單擊
click me按鈕，我們需要增加計數器值。為此，我們使用onclick事件偵聽器。並通過點選Click Me按鈕觸發incrementClick()函式。 -
在
incrementClick()函式內，我們將全域性變數counterVal增加 1 並呼叫updateDisplay函式。 -
點選
Reset按鈕，我們呼叫resetCounter()函式。在這個函式中，我們將全域性計數器值 (counterVal) 重置為0並呼叫updateDisplay()函式。 -
在
updateDisplay()函式中，我們將它作為引數接收到的值顯示到儲存計數器值的<h3>標籤中。它使用 javascript 的document.getElementById()函式來查詢 id 為counter-label的 HTML 元素，然後用新的計數器值更新 innerHTML 屬性。innerHTML屬性進一步更改了在 HTML GUI 介面中顯示的文字。
上面的程式碼示例顯示點選計數器並在按鈕點選時增加它。在大多數用例中，我們可能不會始終在按鈕上應用點選計數器。為了使其靈活，我們必須支援其他 HTML 元素的功能，例如 div、li 等。幾乎所有 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。通過此更改，incrementClick() 在單擊 div 而不是按鈕時被觸發。該程式碼也適用於 <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 偵聽器。這種繫結發生在執行時。對於那個點選監聽器，我們繫結了我們定義的函式。所以程式碼看起來很相似，並沒有太多變化。
評論
無障礙方法之間的區別在於，我們在 javascript 程式碼中繫結了 onclick 偵聽器，而不是在 HTML 中進行繫結。如果為按鈕或 div 分配了 onclick 事件處理程式，將很難僅從 HTML 中實現。
使用這種方法，程式碼看起來更清晰，因為所有 onclick 事件都在 JavaScript 中繫結和處理。它通過標記保持 HTML 乾淨，因為沒有 JavaScript 程式碼侵入 HTML。
如果我們不在 window.onload 函式中設定 onclick 偵聽器，程式碼將無法工作。document.getElementById("click-div") 程式碼將返回 null，因為它將無法找到 HTML 元素。wondow.onload 函式在視窗載入完畢且 DOM 準備就緒後被觸發。因此，通過將程式碼放在 window.onload 塊中，可以確保載入 HTML 元素，並且可以使用 JavaScript 的 document.getElementById() 函式進行查詢。