Hướng dẫn how to count the number of times a button is clicked using javascript ? - làm cách nào để đếm số lần một nút được nhấp bằng javascript?

Đếm số lượng nhấp chuột vào một yếu tố là một trong những điều dễ nhất bạn có thể làm với JavaScript. Tất cả những gì bạn cần làm là khai báo một biến để lưu trữ các nhấp chuột của bạn và sau đó sử dụng phương thức addEventListener trên phần tử đích của bạn. & NBSP;

Hãy nói rằng bạn muốn theo dõi số lượng nhấp chuột trên một phần tử nút, ví dụ: một nút home. & nbsp;

Đánh dấu HTML

Tạo một phần tử nút HTML và cho nó một lớp nút tại nhà:

<button class="button-home">Homebutton>

Thêm mã sau vào tệp JavaScript của bạn (Tôi sẽ giải thích mã 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 một chút kiểu dáng CSS vào phần tử nút ở trên để dễ dàng nhấn hơn.

Những gì xảy ra trong mã JavaScript:

• Đầu tiên, chúng tôi sử dụng phương thức

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

  0 để chọn lớp

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

  1 trên phần tử nút. Sau đó, chúng tôi gán nó cho biến

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

  2.
• Sau đó, chúng tôi khai báo biến

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

  3 để lưu trữ các nhấp chuột trong tương lai của chúng tôi. Chúng tôi cung cấp cho nó một giá trị ban đầu mặc định là 0.
• Sau đó, chúng tôi đính kèm một trình nghe sự kiện vào nút của chúng tôi bằng cách sử dụng phương thức

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

  4.
• Bên trong trình nghe sự kiện của chúng tôi, chúng tôi chỉ định rằng chúng tôi đang nghe các sự kiện

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

  5 và chúng tôi muốn thực hiện

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

  6 trên mỗi sự kiện nhấp chuột.
• Bên trong chức năng của chúng tôi, chúng tôi chỉ định rằng muốn thêm 1 vào biến

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

  3 của chúng tôi mỗi khi sự kiện nhấp chuột được kích hoạt. Để thêm 1, chúng tôi sử dụng toán tử

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

  8 (cộng với bằng).
• Cuối cùng, chúng tôi đăng nhập từng sự kiện nhấp chuột bằng cách sử dụng

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

  9 trên biến

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

  3 của chúng tôi.

Bây giờ bạn đã biết cách đếm số nhấp chuột vào một yếu tố cụ thể.

Tốt để biết:

• Mã trên là sử dụng cú pháp ES6. Nếu bạn sử dụng ES5, chỉ cần thay thế

    Try it
  

  1 bằng

    Try it
  

  2 và nó sẽ hoạt động giống nhau.
• Loại chức năng chúng tôi sử dụng trong ví dụ này được gọi là hàm ẩn danh vì nó không có tên - không giống như các biểu thức chức năng và khai báo chức năng.anonymous function because it doesn’t have a name — unlike function expressions and function declarations.
• Các chức năng ẩn danh không thể được sử dụng lại. Nếu bạn cần gọi cùng một hàm trên một số sự kiện, hãy sử dụng biểu thức chức năng hoặc khai báo chức năng.

Nhận mã

Ở đây, một codepen với tất cả các mã ở trên.