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 :

   
  
  <element onclick="myScript"/>
  
  
  <span onclick="fungsinya()">Klik</span>
  
  
  <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 :

   
  
  <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.

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

See the Pen
event onClick() by codenya.com (@codenyacom)
on CodePen.

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

 
<script type="text/javascript">
function fungsinya(){
	//tulis proses yang diinginkan di sini
}
</script;>
 

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