acara klik
Contoh
Jalankan JavaScript saat tombol diklik:
<button onclick="myFunction()">Click me</button>
Definisi dan Penggunaan
Acara onclickini terjadi ketika pengguna mengklik sebuah elemen.
Dalam HTML:
<element onclick="myScript">
Dalam JavaScript:
object.onclick = function(){myScript};
Dalam JavaScript, menggunakan metode addEventListener() :
object.addEventListener("click", myScript);
Detail Teknis
| Gelembung: | Ya |
|---|---|
| Dapat dibatalkan: | Ya |
| Jenis acara: | Acara Tikus |
Tag HTML yang didukung : |
Semua kecuali: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, dan <title> |
Lebih Banyak Contoh
Klik <button> untuk menampilkan tanggal:
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
Klik elemen <h3> untuk mengubah warna teks:
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Contoh lain tentang cara mengubah warna elemen:
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
Klik untuk menyalin teks dari satu bidang masukan ke bidang lainnya:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Cara menetapkan acara "onclick" ke objek jendela:
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Gunakan onclick untuk membuat dropdown:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Halaman Terkait
Tutorial JavaScript: Acara JavaScript
Referensi DOM HTML: acara ondblclick
Referensi DOM HTML: acara onmousedown
Referensi DOM HTML: acara onmouseup
Dukungan Peramban
onclick adalah fitur DOM Level 2 (2001).
Ini didukung penuh di semua browser:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |