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