Tutorial ini akan menjelaskan prosedur tentang cara mengatur onClick dengan JavaScript.
Cara Mengatur onClick Dengan JavaScript
Untuk mengatur onclick dengan JavaScript, ada dua metode yang berbeda, yaitu:
- Metode pertama adalah menetapkan nilai ke elemen HTML onclick atribut menggunakan JavaScript.
- Metode kedua adalah dengan secara eksplisit menambahkan pendengar acara pada acara HTML yang memeriksa ' klik ' peristiwa.
Contoh 1: Tetapkan Nilai ke Atribut onclick Elemen HTML Menggunakan JavaScript
Di file HTML, buat tajuk dan tombol ' Klik saya 'dengan id' js ” yang akan memicu fungsi JavaScript saat mengkliknya.
< h2 > Mengatur properti onClick Dengan JavaScript h2 >
< tombol id = 'js' > Klik saya tombol >
Pada langkah berikutnya, tombol yang dibuat akan diakses dan tanda “ onclick ” atribut akan dilampirkan padanya. Setelah tombol diklik, fungsi yang ditentukan akan dijalankan dan “ style.backgroundColor ” properti akan mengubah warna tombol sebagai berikut:
dokumen. getElementById ( 'js' ) . onclick = fungsi jsFunc ( ) {
dokumen. getElementById ( 'js' ) . gaya . warna latar belakang = 'Ungu' ;
}
Output yang sesuai adalah:
Contoh 2: Secara Eksplisit Menambahkan Pendengar Acara di Acara HTML
Buat tombol “ Klik disini! ” dan memberikan id “ peristiwa ” untuk itu yang akan memicu metode addEventListener() pada 'klik' peristiwa:
< tombol id = 'peristiwa' > Klik disini ! kuat > tombol kuat >>
Ambil tombol menggunakan miliknya Indo lalu lampirkan “ addEventListener() ” metode dengan melewati “ klik “Acara dan Fungsi” eventFunc ” di mana warna latar belakang tombol akan diubah:
dokumen. getElementById ( 'peristiwa' ) . addEventListener ( 'klik' , eventFunc ) ;fungsi acaraFunc ( ) {
dokumen. getElementById ( 'peristiwa' ) . gaya . warna latar belakang = 'Hijau' ;
}
Keluaran
Contoh 3: Menggunakan Semua Metode onClick Sekaligus
Dalam contoh ini, cara kerja semua metode akan ditampilkan sekaligus. Pertama adalah cara default untuk menambahkan atribut onclick di dalam tag HTML itu sendiri. Setelah itu, dua metode pengaturan atribut onclick dengan bantuan JavaScript telah didemonstrasikan juga.
Pada contoh berikut, buat tiga tombol dan lihat fungsionalitas atribut onclick.
- Tombol pertama “ Klik ' akan memanggil ' htmlFunc() ” pada acara klik.
- Tombol “ Klik saya ” akan diakses dengan id yang ditetapkan “ js ” lalu berikan nilai pada atribut onclick tombol menggunakan JavaScript.
- Tombol “ Klik disini! ” akan diakses menggunakan id “ peristiwa ” lalu lampirkan “ addEventListener() ” metode dengan itu:
< tombol id = 'js' > Klik saya tombol >< br >< br >
< tombol id = 'peristiwa' > Klik disini ! tombol >
Fungsi di bawah ini akan memicu “ onclick ” acara tombol “ Klik ”:
fungsi htmlFunc ( ) {peringatan ( 'Tombol diklik oleh acara onClick HTML' ) ;
}
Saat mengklik ' Klik Saya ”, fungsi berikut akan memicu di mana pesan peringatan akan ditampilkan.
dokumen. getElementById ( 'js' ) . onclick = fungsi jsFunc ( ) {peringatan ( 'Tombol diklik oleh fungsi JavaScript onClick' ) ;
}
Fungsi yang diberikan akan memicu tombol “ Klik disini! ”:
dokumen. getElementById ( 'peristiwa' ) . addEventListener ( 'klik' , eventFunc ) ;fungsi acaraFunc ( ) {
peringatan ( 'Tombol diklik oleh JavaScript onClick dengan Metode EventListener' ) ;
}
Output akan menampilkan pesan peringatan pada setiap klik tombol:
Kesimpulan
Untuk menyetel onclick dengan JavaScript, ada dua pendekatan yang berbeda, yang pertama adalah menetapkan nilai ke atribut onclick elemen HTML menggunakan JavaScript dan pendekatan kedua adalah menambahkan pendengar acara secara eksplisit pada acara HTML yang memeriksa ' klik ' peristiwa. Tutorial ini telah mendefinisikan metode untuk menyetel onClick dengan JavaScript beserta contohnya.