Penggunaan Event OnClick() pada html dan Javascript

Apa itu onclick()? Yakni salah satu event yang sering digunakan pada saat membangun suatu aplikasi yang berfungsi untuk memproses suatu perintah ketika user melakukan interaksi pada suatu element tertentu. Dengan kata lain, ketika user menekan, baik itu tombol klik pada mouse maupun tauchpad, pada suatu element tertentu. Event ini akan berfungsi apabila disisipkan pada suatu element tertentu untuk memanggil function yang telah dibuat. Event onclick() ini sudah support pada semua browser terbaru.

Penulisan event onclick() ini juga terdapat berbagai macam cara dan kesemuanya merujuk pada fungsi yang telah dituliskan pada javascript. Beberapa cara penulisannya adalah sebagai berikut :

• Pada HTML
  Event ini disematkan pada element HTML. Apapun bentuknya, boleh pada button ataupun text yang berada diantara tag. Berikut adalah cara penulisannya :
  ?

  1 2 3 4 5 6 7 8 9 10

  <!--basic code penulisan--> <element onclick="myScript"/>   <!--//penulisan menggunakan text pada tag span--> <span onclick="fungsinya()">Klik</span>   <!--//penulisan menggunaka button--> <button onclick="fungsinya()">Klik</button>

• Pada Javasript
  Pada cara ini, event onclick() ditulis secara langsung pada JavaScipt. Jadi, event onclick() ini berada pada code dalam Javascript dan melakukan proses yang diinginkan. Berikut cara penulisannya :
  ?

  1 2 3 4

  <!--contoh penulisan elementtext--> <p id="demo">Klik.</p>

  Setelah code diatas tertulis, pad bagian bawah kita tulis kode JavaScript untuk memanggil nama id demo pada element di atas. Begini cara penulisannya.

  ?

  1 2 3 4 5 6 7 8 9 10

  //cara penulisan pertama--> document.getElementById("demo").onclick = function() {     fungsinya() }; //cara penulisan kedua menggunakan jquery--> $(document).on('click','#demo',function(event){     fungsinya() };

Kesemua code di atas, merujuk pada 1 nama function, yakni fungsinya() pada javascript. Sehingga kita tinggal membuat function di dalam javascript. Begini contoh penulisannya :

Nah, sekarang tinggal Kamu berkreasi ingin melakukan proses apa pada function fungsinya(). Sangat mudah bukan? Giliran Kamu untuk mencobanya sobat!!!