Penggunaan Event OnClick() pada html dan Javascript

event onclick javascript
4.5
(8)

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.

 

Baca juga :

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

Seberapa bermanfaat postingan ini?

Klik bintang sebagai rating vote

Rating rata-rata 4.5 / 5. Jumlah vote 8

Tidak ada vote selama ini

4 Trackbacks / Pingbacks

  1. Membuat Fungsi Show Password dengan CheckBox – Begini Codenya
  2. Menghitung Karakter dengan Event onInput() - Begini Codenya
  3. Event Handling Onchange() Javascript - Begini Codenya
  4. Membuat Filter Upload File pada Web - Begini Codenya

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.


*