tutorial pengembangan web terbaru
 

onclick Acara

Acara Referensi Obyek Obyek acara

Contoh

Mengeksekusi JavaScript ketika sebuah tombol diklik:

<button onclick="myFunction()">Click me</button>
Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

Acara onclick terjadi ketika pengguna mengklik pada sebuah elemen.

Dukungan Browser

Peristiwa
onclick iya nih iya nih iya nih iya nih iya nih

Sintaksis

Dalam HTML:

< Cobalah sendiri "

Dalam JavaScript:

object .onclick=function(){ Cobalah sendiri "

Dalam JavaScript, menggunakan addEventListener() metode:

object .addEventListener("click", myScript );
Cobalah sendiri "

Catatan: addEventListener() metode tidak didukung di Internet Explorer 8 dan versi sebelumnya.

Rincian teknis

Gelembung: iya nih
dibatalkan: iya nih
jenis acara: MouseEvent
tag HTML yang didukung: Semua elemen HTML, KECUALI: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, dan <title>
DOM Versi: Level 2 Acara
contoh

Contoh lebih

Contoh

Klik pada <button> elemen untuk menampilkan hari ini, tanggal dan waktu:

<button onclick="getElementById('demo').innerHTML=Date()">What is the time?</button>
Cobalah sendiri "

Contoh

Klik pada <p> elemen untuk mengubah warna teks untuk merah:

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>

<script>
function myFunction() {
    document.getElementById("demo").style.color = "red";
}
</script>
Cobalah sendiri "

Contoh

Contoh lain tentang cara mengubah warna dari <p> elemen dengan mengkliknya:

<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text color.</p>

<script>
function myFunction(elmnt,clr) {
    elmnt.style.color = clr;
}
</script>
Cobalah sendiri "

Contoh

Klik tombol untuk menyalin beberapa teks dari sebuah field input untuk field input lain:

<button onclick="myFunction()">Copy Text</button>

<script>
function myFunction() {
    document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
Cobalah sendiri "

Contoh

Menetapkan "onclick" event ke objek window:

window.onclick = myFunction;

// If the user clicks in the window, set the background color of <body> to yellow
function myFunction() {
    document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Cobalah sendiri "

Contoh

Menggunakan onclick untuk membuat tombol dropdown:

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
Cobalah sendiri "

Pages terkait

Referensi HTML DOM: acara ondblclick

Referensi HTML DOM: acara onmousedown

Referensi HTML DOM: acara onmouseup

<Object Acara