19/09/2018, 14:50
Sự kiện onclick
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 < ! DOCTYPE html > < html > < body > < button onclick = "myFunction()" > Nh ấ n v à o đâ y < / button > ...
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body> <button onclick="myFunction()">Nhấn vào đây</button> <p id="demo"></p> <p>Nhấn vào nút bên trên để chạy hàm in ra chữ "Xin chào" trong thẻ p với id="demo".</p> <script> function myFunction() { document.getElementById("demo").innerHTML = "Xin chào"; } </script> </body> </html> |
Demo
Xem thêm ví dụ bên dưới
Định nghĩa và cách sử dụng
Thuộc tính onclick được kích hoạt khi người dùng nhấn chuột vào thẻ.
Trình duyệt hỗ trợ
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| onclick | Có | Có | Có | Có | Có |
Khác biệt giữa HTML 4.01 và HTML5
Không có sự khác biệt.
Cú pháp
|
1 |
<element onclick="script"> |
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| script | Chạy script khi thuộc tính được kích hoạt |
Chi tiết
Thuộc tính onclick dùng được trong tất cả các thẻ HTML ngoại trừ thẻ : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> và <title>.
Ví dụ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <p id="demo" onclick="myFunction()">Nhấn vào đây để thay đổi màu chữ.</p> <p>Nhấn vào thẻ p bên trên để kích hoạt hàm thay đổi màu của chữ trong thẻ sang đỏ.</p> <script> function myFunction() { document.getElementById("demo").style.color = "red"; } </script> </body> </html> |
Demo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> Chữ mẫu: <input type="text" id="field1" value="Xin chào!"><br> Sao chép: <input type="text" id="field2"><br><br> <button onclick="myFunction()">Sao chép</button> <p>Nhấn vào nút trên để kích hoạt hàm sao chép từ ô Chữ mẫu sang ô Sao chép.</p> <script> function myFunction() { document.getElementById("field2").value = document.getElementById("field1").value; } </script> </body> </html> |
Demo
