Skip to content Skip to sidebar Skip to footer

Cara dan Memahami Penggunaan Fungsi Onclick() Event Pada Javascript

Belajar memahami fungsi onclick event pada javascript
Dalam artikel kali ini akan mempelajari fungsi onclick(), Onclick adalah event dalam javascript yang memberikan aksi ketika mouse melakukan klik pada element HTML. Jadi misalnya ketika anda mengeklik sebuah tombol di halaman website atau aplikasi, kita dapat menggunakan event onclick untuk memberikan sebuah aksi seperti menampilkan pesan atau sebagainya.

Ok langsung saja pada contoh penggunaan event onclick dalam javascript ini, silahkan buat file .html dan jalan program di bawah ini.


Program Penggunaan Fungsi Event Onclick() Di Javascript

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>

 <button onclick="klik()">Klik Saya</button>

 <p id="demo">Teks ini akan berubah</p>

<script>
 function klik(){
  document.getElementById("demo").innerHTML = " Hello World !";
 }
</script>

</body>
</html>

Hasil :
Gambar Gif Contoh penggunaan onclick event di javascript
Saya telah memeberikan sebuah event apabila tombol di klik ketika pengguna mengeklik button klik saya, akan mengubah teks paragraph dengan Hello World !

Selain cara penggunaan event onclik diatas, ada juga cara kedua menggunakan fungsi onclick pada javascript ini. Perhatikan program berikut
.

Cara Kedua Penggunaan Onclick Dalam Javascript

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>

 <button>Klik Saya</button>

<script>
 var btn = document.querySelector('button');
 btn.onclick = function(){
  alert('Halo, ini adalah pesan ketika anda klik tombol');
 }
</script>
</body>
</html>

Jika anda perhatikan program diatas, bedanya ialah tidak menggunakan event onclick pada tag HTML dan menghapus function klik() di script javascript-nya. Dengan menggunakan document.querySelector() dalam javascript-nya untuk mengambil seleksi sebuah element pada tag html.

Hasil :
Gambar Gif Contoh cara kedua penggunaan fungsi onclick event pada javascript

Pelajari juga event lainnya :

Post a comment for "Cara dan Memahami Penggunaan Fungsi Onclick() Event Pada Javascript"