Đế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à:
Home
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ớpbutton-home
trên phần tử nút. Sau đó, chúng tôi gán nó cho biếnbuttonHome
. - 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ệnfunction[]
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ử
0 [cộng với bằng].let buttonHome = document.querySelector[".button-home"]; let CountButtonHomeClicks = 0; buttonHome.addEventListener["click", function[] { CountButtonHomeClicks += 1; console.log[CountButtonHomeClicks]; }];
- 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
1 trên biếnlet buttonHome = document.querySelector[".button-home"]; let CountButtonHomeClicks = 0; buttonHome.addEventListener["click", function[] { CountButtonHomeClicks += 1; console.log[CountButtonHomeClicks]; }];
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ế
3 bằnglet 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.let buttonHome = document.querySelector[".button-home"]; let CountButtonHomeClicks = 0; buttonHome.addEventListener["click", function[] { CountButtonHomeClicks += 1; console.log[CountButtonHomeClicks]; }];
- 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];
}];
5let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
6let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
7let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
8let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
6querySelector[]
0let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
8Phươ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];
}];
6button-home
4button-home
5button-home
4let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
8button-home
8querySelector[]
0
let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
8Làm thế nào bạn sẽ theo dõi số lần một nút được nhấp bằng mã?
Element. title = [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.
CountButtonHomeClicks
4CountButtonHomeClicks
5
querySelector[]
2button-home
8buttonHome
9
let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
8querySelector[]
2
let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
6addEventListener[]
2let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
8CountButtonHomeClicks
4addEventListener[]
5
CountButtonHomeClicks
4addEventListener[]
7
querySelector[]
2button-home
8addEventListener[]
2
let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
8Xem thảo luận
querySelector[]
2
let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
6function[]
3let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
8CountButtonHomeClicks
4function[]
6function[]
7
CountButtonHomeClicks
4'click'
5querySelector[]
6CountButtonHomeClicks
1CountButtonHomeClicks
2function[]
7CountButtonHomeClicks
4
querySelector[]
2button-home
8function[]
3
let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
8Cải thiện bài viết
CountButtonHomeClicks
4
let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
07CountButtonHomeClicks
4
let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
09CountButtonHomeClicks
4
let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
11CountButtonHomeClicks
4
let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
13let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
14let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
15let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
14let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
17CountButtonHomeClicks
4
let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
19Lưu bài viết
button-home
8buttonHome
2
let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
8button-home
8
let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
7let buttonHome = document.querySelector[".button-home"];
let CountButtonHomeClicks = 0;
buttonHome.addEventListener["click", function[] {
CountButtonHomeClicks += 1;
console.log[CountButtonHomeClicks];
}];
8Output: