Computer >> Máy Tính >  >> Lập trình >> Javascript

Cách tạo các phần tử với Vanilla JavaScript

Đếm số lần nhấp vào một phần tử là một trong những điều dễ dàng 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ử mục tiêu của bạn.

Giả sử bạn muốn theo dõi số lần nhấp vào một phần tử nút, ví dụ:một nút trang chủ.

Đánh dấu HTML

Tạo một phần tử nút HTML và cung cấp cho nó một lớp button-home:

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

JavaScript

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ả:

Cách tạo các phần tử với Vanilla JavaScript

Tôi đã thêm một chút kiểu dáng CSS vào phần tử nút ở trên để dễ sử dụng hơn.

Điều gì đang xảy ra trong mã JavaScript:

  • Đầu tiên, chúng tôi sử dụng querySelector() để chọn button-home lớp trên phần tử nút. Sau đó, chúng tôi gán nó cho buttonHome biến.
  • Sau đó, chúng tôi khai báo CountButtonHomeClicks biến để 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ó giá trị ban đầu mặc định là 0.
  • Sau đó, chúng tôi đính kèm một trình xử lý sự kiện vào buttonHome của chúng tôi bằng cách sử dụng addEventListener() phương pháp.
  • Bên trong trình xử lý sự kiện của chúng tôi, chúng tôi chỉ rõ rằng chúng tôi đang lắng nghe 'click' sự kiện và chúng tôi muốn thực thi một function() trên mỗi sự kiện nhấp chuột.
  • Bên trong hàm của chúng tôi, chúng tôi chỉ định rằng muốn thêm 1 vào CountButtonHomeClicks của chúng tôi biến 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ử (cộng bằng).
  • Cuối cùng, chúng tôi ghi nhật ký từng sự kiện nhấp chuột bằng console.log() trên CountButtonHomeClicks của chúng tôi biến.

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

Điều cần biết:

  • Đoạn mã trên sử dụng cú pháp ES6. Nếu bạn đang sử dụng ES5, chỉ cần thay thế let với var và nó sẽ hoạt động như cũ.
  • Loại hàm chúng tôi sử dụng trong ví dụ này được gọi là hàm ẩn danh bởi vì nó không có tên - không giống như biểu thức hàm và khai báo hàm.
  • Không thể sử dụng lại các chức năng ẩn danh. 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 hàm hoặc khai báo hàm.

Đây là CodePen với tất cả mã ở trên.