JavaScript Onclick: Hướng dẫn từng bước

Sự kiện onclick của JavaScript thực thi một hàm khi người dùng nhấp vào nút hoặc phần tử web khác. Phương pháp này được sử dụng cả nội tuyến trong tài liệu HTML và trong tài liệu JavaScript.

Khi viết mã JavaScript, thường muốn chạy mã khi người dùng tương tác với trang web. Ví dụ, bạn có thể muốn điều gì đó xảy ra khi người dùng nhấn nút. Nhưng làm thế nào để triển khai chức năng này trong JavaScript?

Đó là lúc sự kiện "onclick()" có ích. Sự kiện onclick là một trong những loại sự kiện thường được sử dụng nhất. Onclick cho phép bạn chạy mã khi người dùng nhấp vào nút hoặc phần tử khác trên trang web.

Trong hướng dẫn ngắn này, chúng ta sẽ phân tích cách hàm onclick hoạt động. Chúng ta sẽ thảo luận cách sử dụng onclick trong mã để làm cho trang web trở nên tương tác.

Tóm tắt về Sự kiện

Onclick là một loại sự kiện JavaScript. Sự kiện là các hành động diễn ra trong trình duyệt có thể được khởi động bởi người dùng hoặc chính trình duyệt. Người dùng nhấp nút, gửi biểu mẫu, hoặc nhấn phím trên bàn phím đều là ví dụ về sự kiện. Trong hướng dẫn này, chúng ta tập trung vào cái đầu tiên: người dùng nhấp vào phần tử.

Bằng cách sử dụng sự kiện, các nhà phát triển có thể làm cho trang web tương tác. Bạn có thể làm cho biểu mẫu hiển thị khi người dùng nhấp nút, hoặc hiển thị thông báo cho người dùng khi họ gửi biểu mẫu.

Có hai thành phần chính của sự kiện: trình xử lý sự kiện (event handlers) và trình lắng nghe sự kiện (event listeners).

Khi bạn nhấp nút, nhấn phím, hoặc di chuột qua phần tử, một sự kiện được chạy. Trình xử lý sự kiện là mã chạy khi sự kiện của bạn bắt đầu. Ví dụ, khi bạn nhấp nút, trình xử lý sự kiện sẽ chạy.

81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.

Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.

Trình lắng nghe sự kiện là một phần của phần tử—như một nút—để "lắng nghe" và chờ cho đến khi bạn tương tác với nó. Sau đó, trình lắng nghe thực thi trình xử lý sự kiện.

JavaScript onclick

Sự kiện onclick của JavaScript thực thi một hàm khi bạn nhấp vào nút hoặc phần tử web khác. Ví dụ, sự kiện onclick có thể kích hoạt hộp thoại xuất hiện khi bạn nhấp vào nút.

Dưới đây là cú pháp cho phương thức onclick trong HTML:

<button onclick="codetorun">Nhấn tôi</button>

Khi nút HTML này được nhấp, hàm JavaScript "codetorun" sẽ thực thi. Chúng ta có thể sử dụng onclick với các phần tử khác, như div. Onclick không chỉ dành cho nút.

Bạn cũng có thể sử dụng onclick trong JavaScript thuần túy. Đây là ví dụ về phương thức onclick JavaScript:

var item = document.getElementById("button");
item.onclick = function() {
  codetoexecute...
}

Chúng ta sử dụng phương thức getElementById của JavaScript để truy xuất phần tử từ trang web. Khi nhấp vào phần tử với ID "button", hàm onclick sẽ thực thi.

Ví dụ Button onclick JavaScript

Giả sử bạn muốn thay đổi văn bản trên trang web sau khi nhấp vào phần tử p, hay một đoạn văn. Chúng ta có thể sử dụng thuộc tính onclick để triển khai tính năng này trên trang web. Hãy bắt đầu với trang HTML có nút và một số văn bản. Chúng ta cũng sẽ tạo tệp JavaScript chứa mã sự kiện.

index.html
<!DOCTYPE html>
<html>
<head>
  <title>ví dụ onclick</title>
</head>
<!-- Phần thân mã chính -->
<body>
  <button>Nhấn ở đây.</button>
  <p>Văn bản này sẽ thay đổi khi bạn nhấp nút.</p>
</body>
<!-- Tham chiếu mã sự kiện JavaScript -->
<script src=“js/onclick.js”></script>
</html>

Đây là ví dụ về trang web cơ bản, nhưng nó chưa tương tác. Khi trang web này chạy, chúng ta sẽ thấy nút và văn bản, nhưng không có gì xảy ra khi nhấp nút. Đó là vì chúng ta chưa triển khai hàm sự kiện onclick.

Bây giờ trang web đã sẵn sàng, chúng ta có thể bắt đầu tạo sự kiện onclick. Chúng ta trước tiên cần thêm trình lắng nghe sự kiện onclick() vào nút. Sự kiện này sẽ lắng nghe khi người dùng nhấp vào nút.

index.html
...
<body>
  <button onclick=“changeParagraph()”>Nhấn ở đây.</button>
  <p>Văn bản này sẽ thay đổi khi bạn nhấp nút.</p>
</body>
…

Hãy tạo tệp "onclick.js", sẽ chứa mã cho sự kiện changeParagraph(). Sự kiện này sẽ thay đổi văn bản của đoạn văn (phần tử "p") thành thứ khác.

onclick.js
const changeParagraph = () => {
  const paragraph = document.querySelector(“p”);
  paragraph.textContent = “Văn bản này đã thay đổi vì bạn nhấp nút.”
}

Chúng ta đã định nghĩa hàm JavaScript gọi là changeParagraph. Chúng ta dùng phương thức querySelector của JavaScript để chọn đoạn văn trên trang. Khi tải trang lần đầu, chúng ta thấy nút và văn bản "Văn bản này sẽ thay đổi khi bạn nhấp nút."

Sau khi nhấp nút, trang web thay đổi và hiển thị văn bản mới:

Tóm tắt

Tóm lại, onclick() là một loại sự kiện JavaScript cho phép bạn chạy mã nhất định khi phần tử trên trang web được nhấp.

Đó là tất cả! Bằng cách sử dụng mã trên, chúng ta đã tạo thành công trang web sẽ chạy mã khi nhấn nút. Mặc dù mã trên chỉ thay đổi văn bản, bạn có thể làm cho nó phức tạp hoặc đơn giản tùy ý.

Nếu bạn muốn cảnh báo người dùng khi họ nhấp nút, bạn có thể dùng hàm alert() trong JavaScript. Nếu muốn thêm câu lệnh "if" vào mã, bạn cũng có thể làm điều đó.

Để có thêm tài nguyên học JavaScript, hãy xem hướng dẫn Cách học JavaScript của chúng tôi.