Tạo Element và đếm click với Vanilla JavaScript

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

Giả sử muốn theo dõi click trên nút home button.

HTML Markup

Tạo button element với class button-home:

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

JavaScript

Thêm code sau vào file JS (giải thích bên dưới):

// Chọn element button
let buttonHome = document.querySelector(".button-home");

// Biến lưu số click, giá trị khởi tạo 0
let countButtonHomeClicks = 0;

// Gắn event listener cho sự kiện click
buttonHome.addEventListener("click", function() {
  // Tăng biến đếm lên 1 mỗi lần click
  countButtonHomeClicks += 1;
  
  // Log ra console
  console.log(countButtonHomeClicks);
});

Kết quả

(Đã thêm chút CSS cho button dễ click hơn)

Giải thích code JavaScript

1. document.querySelector(".button-home"): Chọn element đầu tiên có class button-home, gán vào biến buttonHome.
2. let countButtonHomeClicks = 0: Khai báo biến đếm, khởi tạo = 0.
3. addEventListener("click", function() {...}): Gắn listener lắng nghe sự kiện 'click', thực thi function ẩn danh mỗi khi click.
4. countButtonHomeClicks += 1: Toán tử += (plus equals) cộng 1 vào biến đếm.
5. console.log(countButtonHomeClicks): In giá trị đếm ra console mỗi lần click.

Kiến thức bổ sung

• ES6 vs ES5: Code dùng let (ES6). Nếu dùng ES5, thay let bằng var.
• Anonymous function: Function trong ví dụ không có tên (khác với function expression/declaration). Không thể tái sử dụng. Nếu cần gọi cùng function cho nhiều event, dùng function expression/declaration.
• Arrow function (ES6): Viết gọn hơn: buttonHome.addEventListener("click", () => { countButtonHomeClicks++; console.log(countButtonHomeClicks); });

CodePen Demo

Xem demo đầy đủ trên CodePen (link placeholder).