Làm cách nào chúng ta có thể gọi một hàm mà không cần onclick trong HTML?

Có nhiều cách để gọi một hàm JavaScript trong tài liệu HTML và đây cũng không phải là một nhiệm vụ khó khăn. Đầu tiên, chúng tôi đã sử dụng một trong những cách dễ nhất để gọi hàm JavaScript trong tài liệu HTML

Trong phương pháp này, chúng ta sẽ tạo và định nghĩa một hàm trong phần đầu của tài liệu HTML. Để gọi hàm này trong tài liệu html, chúng ta phải tạo một nút đơn giản và sử dụng thuộc tính sự kiện onclick (là trình xử lý sự kiện) cùng với nó, chúng ta có thể gọi hàm bằng cách nhấp vào nút

Để hiểu rõ hơn ta xem chương trình đã cho

Chương trình

Thuyết minh chương trình

Trong chương trình đã cho ở trên, chúng tôi đã tạo một tài liệu HTML đơn giản. Bên trong phần đầu của tài liệu HTML, chúng ta đã định nghĩa một hàm (e. g myfunction();) bên trong các thẻ script

Mặt khác, bên trong phần nội dung, chúng tôi đã hiển thị một số văn bản và tạo một nút. Để gọi chức năng của chúng tôi, chúng tôi đã sử dụng thuộc tính onclick cùng với nút và khi người dùng nhấp vào nút đó, chức năng của chúng tôi sẽ được thực thi và hiển thị thông báo cảnh báo, như bạn có thể thấy trong đầu ra

đầu ra

Gọi một hàm bằng tệp JavaScript bên ngoài

Chúng tôi cũng có thể gọi các hàm JavaScript bằng tệp JavaScript bên ngoài được đính kèm với tài liệu HTML của chúng tôi. Để làm điều này, trước tiên chúng ta phải tạo một tệp JavaScript và xác định chức năng của chúng ta trong đó và lưu nó với (. Js) tiện ích mở rộng

Khi tệp JavaScript được tạo, chúng ta cần tạo một tài liệu HTML đơn giản. Để đưa tệp JavaScript của chúng tôi vào tài liệu HTML, chúng tôi phải sử dụng thẻ script. Vì chúng tôi đã lưu trữ tài liệu HTML và tệp JavaScript trong cùng một thư mục nên chúng tôi chỉ đặt tên tệp JavaScript của mình trong thuộc tính "scr" thay vì cung cấp đường dẫn đầy đủ trong phần đầu

Bên trong phần nội dung, chúng tôi đã hiển thị một số văn bản và tạo một nút. Để gọi chức năng của chúng tôi, chúng tôi đã sử dụng thuộc tính onclick cùng với nút và khi người dùng nhấp vào nút đó, chức năng của chúng tôi sẽ được thực thi và hiển thị thông báo cảnh báo, như bạn có thể thấy trong đầu ra

Thí dụ

Gọi một chức năng khi một nút được bấm

Nhấp vào đây

Thêm ví dụ bên dưới

Định nghĩa và cách sử dụng

Sự kiện onclick xảy ra khi người dùng nhấp vào một phần tử HTML

cú pháp

Trong JavaScript, sử dụng phương thức addEventListener()

mục tiêu. addEventListener("click", myScript);

chi tiết kỹ thuật

Một ví dụ khác về cách thay đổi màu của một phần tử

Nhấp vào tôi để thay đổi màu sắc của tôi

Nhấp để sao chép văn bản từ trường nhập liệu này sang trường nhập liệu khác

Sao chép văn bản

hàm myFunction() {
tài liệu. getElementById("trường2"). giá trị = tài liệu. getElementById("trường1"). giá trị;
}

Cách gán sự kiện "onclick" cho đối tượng cửa sổ

cửa sổ. onclick = myFunction;

hàm myFunction() {
tài liệu. getElementsByTagName("BODY")[0]. Phong cách. backgroundColor = "vàng";
}

Sử dụng onclick để tạo danh sách thả xuống

tài liệu. getElementById("myBtn"). onclick = function() {myFunction()};

hàm myFunction() {
tài liệu. getElementById("myDropdown"). danh sách lớp học. chuyển đổi ("hiển thị");
}

Hỗ trợ trình duyệt

onclick là một tính năng DOM Cấp 2 (2001)

Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt

Trong bài viết này, chúng ta sẽ khám phá cách gọi và khởi tạo hàm JavaScript từ một mẫu HTML. Chúng tôi yêu cầu hàm JavaScript thực thi các phương thức mong muốn đối với đầu vào được truyền

Trong hướng dẫn này, chúng ta sẽ thảo luận về hai cách tiếp cận chính để gọi hàm JavaScript từ trang HTML

Trong Cách tiếp cận đầu tiên, chúng tôi sẽ lấy một thẻ đầu vào đơn giản và nút Gửi được liên kết với nó. Sau khi nhấp vào nút, chúng ta sẽ thấy một hộp thoại bật lên trên màn hình dưới dạng cảnh báo. Nút này khi nhấp gọi sẽ gọi hàm JavaScript để hiển thị cảnh báo

Cách tiếp cận 1

• Đầu tiên, lấy một nút bằng thẻ đầu vào

• Sau khi nhấp vào nút, bạn có thể thấy một hộp thoại bật lên trên màn hình đã được khai báo trong hàm JavaScript dưới dạng cảnh báo

• Hàm clickEvent() cho phép thực thi cảnh báo() khi nút này được nhấp bằng cách sử dụng phương thức onclick()

ví dụ 1

# mục lục. html

   
      Welcome To Tutorials Point
   
   
   

đầu ra

Chương trình trên sẽ cho ra kết quả như sau. Khi bạn nhấp vào nút "Bấm vào đây. ", nó sẽ cảnh báo với thông báo "Này…chức năng Javascript được gọi. "

Cách tiếp cận 2

Theo cách tiếp cận này, chúng ta có thể sử dụng JavaScript để viết HTML trực tiếp. Chúng tôi có thể thêm tất cả mã mẫu của mình bên trong thẻ script và ghi vào mẫu bằng tài liệu. viết phương pháp. Tương tự, chúng ta cũng có thể sử dụng các hàm JavaScript trực tiếp từ mẫu HTML mà không cần sử dụng bất kỳ sự kiện nào

Làm cách nào để gọi hàm mà không cần onClick trong HTML?

Bạn có thể gọi một hàm trong HTML không?

Làm cách nào để gọi hàm JavaScript có tham số trong HTML?

OnClick có chỉ hoạt động trên các nút không?