Terkadang pengembang harus mengetahui ID tombol yang telah diklik pengguna untuk memutuskan tindakan selanjutnya di laman web. Seperti yang akan Anda lihat dalam artikel ini, ini dapat dilakukan melalui JavaScript vanilla dan jQuery. Jadi, mari kita mulai:
Pertama, kita akan membuat halaman web HTML sederhana yang memiliki dua tombol di tengah halaman:
DOCTYPE html >
< html >
< tubuh >
< tengah >
< div gaya = 'margin-atas: 50px;' >
< h2 > Klik salah satu tombol berikut h2 >
< tombol Indo = 'tombol_satu' gaya = 'lebar: 100px; tinggi:40px; margin-kanan: 10px;' > 1 tombol >
< tombol Indo = 'tombol_dua' gaya = 'lebar: 100 piksel; tinggi: 40 piksel;' > dua tombol >
div >
tengah >
tubuh >
html >
Bagaimana Cara Mendapatkan ID Tombol yang Diklik Menggunakan JavaScript?
Kita bisa mendapatkan ID dari tombol yang diklik menggunakan JavaScript dalam beberapa metode yang berbeda. Dalam metode pertama kami, kami akan mendapatkan nodelist dari semua tag tombol dan menyimpannya di dalam variabel. Kemudian kami akan mengulangi nodelist untuk mendapatkan ID tombol yang telah diklik:
< naskah >
tombol var = document.getElementsByTagName ( 'tombol' ) ;
untuk ( membiarkan indeks = 0 ; indeks < tombol.panjang; indeks++ ) {
tombol [ indeks ] .onclick = fungsi ( ) {
peringatan ( ini.id ) ;
}
}
naskah >
Kami juga dapat mengatur setiap tombol dengan klik acara secara individu:
DOCTYPE html >
< html >
< tubuh >
< tengah >
< div gaya = 'margin-atas: 50px;' >
< h2 > Klik salah satu tombol berikut h2 >
< tombol Indo = 'tombol_satu' gaya = 'lebar: 100px; tinggi:40px; margin-kanan: 10px;' klik = 'alertId(this.id)' > 1 tombol >
< tombol Indo = 'tombol_dua' gaya = 'lebar: 100 piksel; tinggi: 40 piksel;' klik = 'alertId(this.id)' > dua tombol >
div >
tengah >
tubuh >
< naskah >
fungsi alertId ( Indo ) {
peringatan ( Indo )
}
naskah >
html >
Bagaimana Cara Mendapatkan ID Tombol yang Diklik Menggunakan jQuery?
jQuery juga memiliki beberapa metode berbeda yang dapat digunakan untuk mendapatkan ID dari tombol yang diklik. Kami akan mulai dengan klik() metode yang diterapkan pada pemilih dan mengambil nama fungsi sebagai argumen opsional:
DOCTYPE html >
< html >
< tubuh >
< tengah >
< div gaya = 'margin-atas: 50px;' >
< h2 > Klik salah satu tombol berikut h2 >
< tombol Indo = 'tombol_satu' gaya = 'lebar: 100px; tinggi:40px; margin-kanan: 10px;' klik = 'alertId(this.id)' > 1 tombol >
< tombol Indo = 'tombol_dua' gaya = 'lebar: 100 piksel; tinggi: 40 piksel;' klik = 'alertId(this.id)' > dua tombol >
div >
tengah >
tubuh >
< naskah >
$ ( 'tombol' ) .klik ( alertId ( $ ( ini ) .attr ( 'Indo' ) ) ) ;
fungsi alertId ( Indo ) {
peringatan ( Indo )
}
naskah >
html >
Kita juga dapat menggunakan pada() metode untuk melampirkan event handler ke elemen. Itu pada() metode mengambil setidaknya satu peristiwa sebagai argumen bersama dengan beberapa argumen opsional lainnya:
< html >
< tubuh >
< tengah >
< div gaya = 'margin-atas: 50px;' >
< h2 > Klik salah satu tombol berikut h2 >
< tombol Indo = 'tombol_satu' gaya = 'lebar: 100px; tinggi:40px; margin-kanan: 10px;' klik = 'alertId(this.id)' > 1 tombol >
< tombol Indo = 'tombol_dua' gaya = 'lebar: 100 piksel; tinggi: 40 piksel;' klik = 'alertId(this.id)' > dua tombol >
div >
tengah >
tubuh >
< naskah >
$ ( 'tombol' ) .pada ( 'klik' , alertId ( $ ( ini ) .attr ( 'Indo' ) ) ) ;
fungsi alertId ( Indo ) {
peringatan ( Indo )
}
naskah >
html >
Kesimpulan
ID tombol yang diklik dapat diakses melalui JavaScript biasa dan jQuery. Kami membahas empat metode tersebut dan memberikan detail mendalam dan contoh yang relevan dalam artikel ini.