Menambahkan Event onclick ke Button dengan JavaScript
Event onclick dalam JavaScript adalah event yang terjadi ketika tombol di-klik. Event ini memungkinkan kita untuk menjalankan kode JavaScript saat tombol tersebut diklik.
Berikut cara menambahkan event onclick ke button dengan JavaScript:
1. Menggunakan Atribut onclick dalam HTML
Cara yang paling mudah adalah dengan menambahkan atribut onclick langsung ke tag <button> dalam HTML:
Kode di atas akan menjalankan fungsi myFunction() saat tombol diklik.
2. Menggunakan JavaScript untuk Menambahkan Event Listener
Cara kedua adalah dengan menambahkan event listener ke tombol menggunakan JavaScript. Ini bisa dilakukan setelah elemen HTML dimuat:
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
// Kode yang akan dijalankan saat tombol diklik
console.log('Tombol diklik!');
});
Kode ini akan menempelkan event listener click ke tombol dengan ID myButton. Ketika tombol diklik, fungsi anonim yang dilampirkan akan dijalankan.
3. Menggunakan Inline JavaScript (Tidak Direkomendasikan)
Cara ini tidak direkomendasikan karena dapat membuat kode HTML menjadi berantakan dan sulit dibaca.
Kode ini akan menampilkan alert "Tombol diklik!" saat tombol diklik.
Contoh Penggunaan
Berikut contoh penggunaan event onclick untuk menampilkan alert dan mengubah isi teks button:
Contoh Event onclick
Kode ini akan menampilkan alert "Tombol diklik!" dan mengubah teks button menjadi "Tombol Telah Diklik" saat tombol diklik.
Kesimpulan
Menambahkan event onclick ke button dengan JavaScript memungkinkan kita untuk membuat tombol yang interaktif dan menjalankan kode JavaScript saat tombol tersebut diklik. Pilih metode yang paling sesuai dengan kebutuhan dan gaya coding Anda.