Đế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
0 để chọn lớplet 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ếnlet buttonHome = document.querySelector[".button-home"]; let CountButtonHomeClicks = 0; buttonHome.addEventListener["click", function[] { CountButtonHomeClicks += 1; console.log[CountButtonHomeClicks]; }];
2.let buttonHome = document.querySelector[".button-home"]; let CountButtonHomeClicks = 0; buttonHome.addEventListener["click", function[] { CountButtonHomeClicks += 1; console.log[CountButtonHomeClicks]; }];
- Sau đó, chúng tôi khai báo biến
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.let buttonHome = document.querySelector[".button-home"]; let CountButtonHomeClicks = 0; buttonHome.addEventListener["click", function[] { CountButtonHomeClicks += 1; console.log[CountButtonHomeClicks]; }];
- 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
4.let buttonHome = document.querySelector[".button-home"]; let CountButtonHomeClicks = 0; buttonHome.addEventListener["click", function[] { CountButtonHomeClicks += 1; console.log[CountButtonHomeClicks]; }];
- 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
5 và chúng tôi muốn thực hiệnlet 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.let buttonHome = document.querySelector[".button-home"]; let CountButtonHomeClicks = 0; buttonHome.addEventListener["click", function[] { CountButtonHomeClicks += 1; console.log[CountButtonHomeClicks]; }];
- 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
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].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
9 trên biếnlet buttonHome = document.querySelector[".button-home"]; let CountButtonHomeClicks = 0; buttonHome.addEventListener["click", function[] { CountButtonHomeClicks += 1; console.log[CountButtonHomeClicks]; }];
3 của chúng tôi.let buttonHome = document.querySelector[".button-home"]; let CountButtonHomeClicks = 0; buttonHome.addEventListener["click", function[] { CountButtonHomeClicks += 1; console.log[CountButtonHomeClicks]; }];
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ế
1 bằngTry it
2 và nó sẽ hoạt động giống nhau.Try it
- 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.
Tôi có một trang mà tôi muốn đếm số lần nhấp vào một nút. và các số được hiển thị ngay bên dưới nút đó.
Tôi đã cố gắng tìm kiếm và tìm thấy điều này. Tôi nghĩ rằng điều này sẽ không tính tổng số lần nhấp: Theo dõi số lần nhấp nút
Tôi quen thuộc với mã JavaScript, vì vậy bất kỳ trợ giúp nào cũng hữu ích.
user513951
11.9k7 Huy hiệu vàng65 Huy hiệu bạc79 Huy hiệu đồng7 gold badges65 silver badges79 bronze badges
Đã hỏi ngày 6 tháng 6 năm 2014 lúc 6:03Jun 6, 2014 at 6:03
Sahibjot Singhsahibjot SinghSahibjot Singh
1.2913 huy hiệu vàng12 Huy hiệu bạc19 Huy hiệu đồng3 gold badges12 silver badges19 bronze badges
Mã HTML :
Try it
Mã JS:
var inc=0;
function myFunction[] {
inc=inc+1;
alert[inc];
}
Đã trả lời ngày 6 tháng 6 năm 2014 lúc 6:09Jun 6, 2014 at 6:09
Giả sử HTML của bạn là: