Cách đếm số lần click vào phần tử với Vanilla JavaScript

Đếm số lần click vào một phần tử là một trong những việc dễ nhất bạn có thể làm với JavaScript. Chỉ cần khai báo một biến để lưu số lần click và dùng phương thức addEventListener trên phần tử mục tiêu.

Giả sử bạn muốn theo dõi số lần click vào một nút button, ví dụ nút home.

Mã HTML

Tạo một phần tử button HTML và gán class button-home:

<button class="button-home">Home</button>

JavaScript

Thêm mã sau vào file JavaScript (sẽ giải thích bên dưới):

let buttonHome = document.querySelector(".button-home"); let CountButtonHomeClicks = 0; buttonHome.addEventListener("click", function() { CountButtonHomeClicks += 1; console.log(CountButtonHomeClicks); });

Kết quả:

Tôi thêm chút CSS cho nút button để dễ click hơn.

Giải thích mã JavaScript:

• Trước tiên, dùng phương thức querySelector() để chọn class button-home trên phần tử button. Gán vào biến buttonHome.
• Khai báo biến CountButtonHomeClicks để lưu các click tương lai. Gán giá trị mặc định 0.
• Gắn trình lắng nghe sự kiện cho buttonHome bằng phương thức addEventListener().
• Trong trình lắng nghe, chỉ định lắng nghe sự kiện 'click' và thực thi một function() mỗi khi click.
• Trong hàm, tăng biến CountButtonHomeClicks lên 1 mỗi lần click xảy ra. Dùng toán tử += (cộng gán).
• Cuối cùng, ghi log mỗi sự kiện click bằng console.log() trên biến CountButtonHomeClicks.

Bây giờ bạn đã biết cách đếm click trên một phần tử cụ thể.

Điều cần biết:

• Mã trên dùng cú pháp ES6. Nếu dùng ES5, chỉ cần thay let bằng var và hoạt động y như nhau.
• Loại hàm dùng trong ví dụ gọi là hàm ẩn danh vì nó không có tên — khác với biểu thức hàm và khai báo hàm.
• Hàm ẩn danh không thể tái sử dụng. Nếu cần gọi cùng hàm cho nhiều sự kiện, dùng biểu thức hàm hoặc khai báo hàm.

Lấy mã nguồn

Đây là CodePen với toàn bộ mã trên.