Các nút trong trang web được sử dụng để cung cấp trải nghiệm người dùng tương tác. Theo quy tắc, nếu phản hồi cho một lần nhấp vào nút không yêu cầu gửi dữ liệu đến máy chủ, thì tương tác được thực hiện bằng cách sử dụng các tập lệnh JavaScript. Các phương pháp gọi mã JavaScript tương ứng có thể khác nhau - dưới đây là một số tùy chọn khả thi cho các nút thuộc các loại khác nhau.
Hướng dẫn
Bước 1
Nếu việc hiển thị một nút trong trang web được tổ chức bằng cách sử dụng thẻ nút, thì mã JavaScript có thể được đặt trong thuộc tính onclick. Ví dụ, như thế này: button Tất nhiên, không nên đặt mã đủ lớn trực tiếp vào thẻ button - tốt hơn nên thiết kế nó dưới dạng một hàm và chỉ đặt mã để gọi hàm này vào thuộc tính onclick. Ví dụ:
function showAlert () {
cảnh báo ('Đã nhấp vào nút!')
}
cái nút
Bước 2
Nếu nút được hiển thị thông qua một trong các biến thể thẻ đầu vào (gửi, đặt lại, nút hoặc hình ảnh) thì có thể sử dụng cùng một thuộc tính onclick. Ví dụ: đối với một nút để xóa các trường biểu mẫu (đặt lại), mã có thể trông giống như sau: Nếu bạn chỉ muốn JavaScript được thực thi khi nút được nhấp và hành động mặc định không xảy ra, thì hãy thêm lệnh return vào hoặc trực tiếp đến thuộc tính onclick false. Ví dụ:
Bước 3
Nếu bạn cần tổ chức phản hồi để nhấp vào nút của loại gửi, thì ngoài phương pháp trên bằng cách sử dụng thuộc tính onclick, bạn có thể sử dụng các thuộc tính của thẻ biểu mẫu chứa nút này. Lệnh gọi hàm tương ứng có thể được đặt trong thuộc tính gửi đi của thẻ biểu mẫu. Ví dụ:
Bước 4
Nếu nút không phải là một phần tử biểu mẫu mà chỉ là một phần tử đồ họa (thẻ img), thì các tiêu chuẩn cho nó cũng cho phép sử dụng thuộc tính onclick. Ví dụ:
Bước 5
Nếu nút là một siêu liên kết, thì bạn không nên sử dụng các thuộc tính của chính nút đó; tốt hơn nên sử dụng các thuộc tính của thẻ liên kết. Bạn có thể, như trong các tùy chọn trước, sử dụng thẻ onclick. Ví dụ: Và bạn có thể thay thế địa chỉ trong thuộc tính href bằng một lệnh gọi hàm. Ví dụ, như thế này:
