使用 JavaScript 建立一個簡單的點選計數器

Nithin Krishnan 2023年1月30日 2021年7月4日
  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。類似地,在另一個按鈕中,我們在 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 元素的功能,例如 divli 等。幾乎所有 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() 函式進行查詢。