Hướng dẫn how to count number of clicks in javascript - cách đếm số lần nhấp chuột trong 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 querySelector() để chọn lớp button-home trên phần tử nút. Sau đó, chúng tôi gán nó cho biến buttonHome.
• Sau đó, chúng tôi khai báo biến CountButtonHomeClicks để 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 addEventListener().
• 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 'click' và chúng tôi muốn thực hiện function() 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 CountButtonHomeClicks 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);
  });

  0 (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);
  });

  1 trên biến CountButtonHomeClicks 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ế

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

  3 bằng

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

  4 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.

Xem thảo luận

Cải thiện bài viết

Lưu bài viết

Xem thảo luận

Cải thiện bài viết

Lưu bài viết

Đọc

Cách tiếp cận: Đầu tiên, chúng tôi sẽ tạo nút HTML và phần tử đoạn văn trong đó chúng tôi hiển thị nút Nhấp vào đếm. Khi nút được nhấp, chức năng JavaScript được gọi. Chúng tôi khai báo một biến đếm và khởi tạo nó thành 0. Khi người dùng nhấp vào nút, giá trị đếm tăng lên 1 và hiển thị nó trên màn hình.First, we will create a HTML button and a paragraph element where we display the button click count. When the button is clicked, the JavaScript function called. We declare a count variable and initialize it to 0. When user clicks the button, the count value increased by 1 and display it on the screen.

Example:

Làm cách nào để đếm số lượng sự kiện trong JavaScript?

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

Phương thức đếm () đếm số lần bảng điều khiển. Count () được gọi. Phương thức đếm () Số này vào bảng điều khiển.

querySelector()2

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

button-home8querySelector()0

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

Làm thế nào bạn sẽ theo dõi số lần một nút được nhấp bằng mã?

Element.onclick = (function outer () {let counter = 0; return function n trong bên trong () {counter ++; console.log ('id:' + phần tử.id + 'Số lần nhấp:' + Counter);};})) (); Biến bộ đếm sẽ là duy nhất cho mỗi nút, vì vậy bạn sẽ có thông tin cho mỗi nút bao nhiêu lần được nhấp.

CountButtonHomeClicks4CountButtonHomeClicks5

querySelector()2button-home8buttonHome9

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

querySelector()2

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

CountButtonHomeClicks4addEventListener()5

CountButtonHomeClicks4addEventListener()7

querySelector()2button-home8addEventListener()2

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

Xem thảo luận

querySelector()2

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

CountButtonHomeClicks4function()6function()7 

CountButtonHomeClicks4'click'5querySelector()6CountButtonHomeClicks1CountButtonHomeClicks2function()7CountButtonHomeClicks4

querySelector()2button-home8function()3

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

Cải thiện bài viết

CountButtonHomeClicks4

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

CountButtonHomeClicks4

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

CountButtonHomeClicks4

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

CountButtonHomeClicks4

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

CountButtonHomeClicks4

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

Lưu bài viết

button-home8buttonHome2

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

button-home8

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

Output: