資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 JavaScript 統計按鈕點選次數？
跟蹤按鈕點選是 JavaScript 中一項常見的任務，可以透過使用 addEventListener() 方法來實現。透過向按鈕元素新增一個事件處理程式方法，並在每次按下按鈕時遞增一個變數，我們可以簡單地跟蹤按鈕點選次數。我們可以透過在網頁上顯示這些資訊並將點選次數儲存在 localStorage 中，快速向用戶顯示已經點選了多少次。我們甚至可以在使用者關閉瀏覽器後儲存點選次數。
假設我們正在構建一個簡單的計算器，那麼我們將需要可以執行加法、減法、乘法、除法、等於等功能的按鈕。因此，在網頁上包含按鈕是使其更具互動性的方法之一。在本博文中，我們將主要了解如何設計一個按鈕，並使其可點選並計算使用者點選的次數。
建立基本按鈕
在開始跟蹤按鈕點選之前，我們必須首先在網頁上新增一個按鈕元素。<button> HTML 元素是在網頁上建立按鈕的最簡單方法。
示例
<!DOCTYPE html> <html> <body> <button id="myButton">Click Me</button> </body> </html>
這將建立一個帶有“點選我”文字和“myButton” ID 的按鈕。稍後我們將使用此 ID 在 JavaScript 程式碼中引用該按鈕。
使用 JavaScript 跟蹤按鈕點選
方法 1：addEventListener()
有多種 JavaScript 方法可以監視按鈕點選，但當今最常用的方法是使用 addEventListener() 方法。addEventListener() 函式是 JavaScript 的內建函式，它向元素新增一個事件處理程式函式，當發生特定事件（例如，點選按鈕、懸停任何元素、元素進入或元素離開）時，此事件處理程式就會執行。在我們的情況下，我們希望將一個事件處理程式函式與按鈕元素關聯，當點選按鈕時，該函式將被執行。
示例
以下是如何使用 addEventListener() 方法跟蹤按鈕點選的示例：
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click Me</button>
<p id="count"></p>
<script>
var count = 0;
var button = document.getElementById("myButton");
var countDisplay = document.getElementById("count");
button.addEventListener("click", function() {
count++;
countDisplay.innerHTML = count;
});
</script>
</body>
</html>
首先，使用 getElementById() 方法選擇 ID 為“myButton”的按鈕元素。然後我們將初始化變數 clickCount 並將其值設定為零。此 clickCount 變數用於儲存和顯示按鈕被點選的次數。
然後，按鈕元素透過 addEventListener() 函式接收事件處理程式程式碼。addEventListener() 方法的第一個輸入指定要偵聽的事件型別（在本例中為 click）。第二個引數指示在按下按鈕時要執行的函式。
在事件處理程式方法中遞增 ClickCount 變數，並將 ClickCount 的當前值記錄到螢幕上。這允許您確定按鈕點選的頻率。
方法 2：onclick()
此方法使用 onclick 屬性將事件處理程式附加到按鈕元素。每次點選按鈕時，事件處理程式函式都會遞增一個計數器變數。
示例
以下是 onclick 屬性的示例程式碼
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click Me</button>
<p id="result"></p>
<script>
var count = 0;
var button = document.getElementById("myButton");
var result = document.getElementById("result");
button.onclick = function() {
count++;
result.innerHTML = count;
}
</script>
</body>
</html>
方法 3：使用 Bind 方法
此方法使用 bind 方法將事件偵聽器附加到按鈕元素，並將當前計數值繫結到函式。
示例
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click Me</button>
<p id="count"></p>
<script>
var count = 0;
var button = document.getElementById("myButton");
var countDisplay = document.getElementById("count");
button.addEventListener("click", (function(count) {
return function() {
count++;
countDisplay.innerHTML = count;
}
})(count));
</script>
</body>
</html>
方法 4：使用閉包
閉包是一個可以訪問父函式作用域中變數的函式，即使父函式已經返回。透過使用閉包，您可以以全域性作用域無法訪問的方式維護對計數變數的跟蹤。
示例
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click Me</button>
<p id="count"></p>
<script>
function createCounter() {
let count = 0;
return function() {
count++;
return count;
}
}
const counter = createCounter();
const button = document.getElementById("myButton");
const countDisplay = document.getElementById("count");
button.addEventListener("click", () => {
countDisplay.innerHTML = counter();
});
</script>
</body>
</html>
方法 5：將點選次數儲存在本地儲存中
雖然在網頁上顯示點選次數很有用，但這並不是一個長期解決方案。每當使用者重新整理頁面或關閉瀏覽器時，點選次數就會丟失。我們可以利用 localStorage 物件將點選次數儲存在使用者的瀏覽器中，以便即使在使用者關閉瀏覽器後也能儲存點選次數。
示例
以下是如何使用 localStorage 儲存點選次數的示例：
<!DOCTYPE html>
<html>
<body>
<button id="my-button">Click Me</button>
<div id="click-count">Button clicked: 0 times</div>
<script>
let button = document.getElementById("my-button");
let clickCount = 0;
let display = document.getElementById("click-count");
if (localStorage.getItem("clickCount")) {
clickCount = parseInt(localStorage.getItem("clickCount"));
}
button.addEventListener("click", function() {
clickCount++;
display.innerHTML = "Button clicked: " + clickCount + " times";
localStorage.setItem("clickCount", clickCount);
});
</script>
</body>
</html>
首先，我們檢查 localStorage 中是否在“clickCount”下儲存了值。如果 localStorage 中儲存了值，則將其解析為整數，然後將其分配給 clickCount 變數。
接下來，在事件偵聽器函式中新增另一行，以使用 setItem() 方法將 clickCount 變數的當前值儲存到 localStorage。這樣，即使使用者重新整理頁面或關閉瀏覽器，點選次數也會被儲存，並在下次訪問網站時檢索。
需要注意的是，localStorage 物件的儲存限制約為 5-10MB，具體取決於瀏覽器。此外，localStorage 物件將資料儲存為字串，因此在獲取值時需要將數字轉換為字串並重新解析為數字。
16K+ 次瀏覽
