Panduan ini akan menunjukkan objektif, dan kerja acara 'onchange' dalam JavaScript.
Bagaimana untuk Menggunakan Acara 'onchange' dalam JavaScript?
' onchange ” acara diaktifkan apabila nilai elemen HTML yang ditentukan ditukar. Apabila peristiwa ini dicetuskan, fungsi JavaScript yang berkaitan akan dilaksanakan untuk melaksanakan tugas tertentu.
Sintaks
objek. onchange = fungsi ( ) { myScript } ;
Dalam sintaks di atas:
- unsur: Ia menandakan elemen HTML tertentu.
- fungsi(): Ia mewakili fungsi yang ditentukan yang akan digunakan pada pencetus peristiwa.
- myScript: Ia merujuk kepada definisi fungsi JavaScript untuk melaksanakan tugas tertentu apabila peristiwa 'pertukaran' berlaku.
Sintaks(Dengan Kaedah 'addEventListener()')
objek. addEventListener ( 'ubah' , myScript ) ;
Dalam sintaks di atas, ' addEventListener() ' kaedah menggunakan ' onchange ” acara untuk melaksanakan fungsi JavaScript untuk melaksanakan pelbagai tugas.
Contoh 1: Menggunakan Acara 'onchange' untuk Memaparkan Nilai Terpilih Menggunakan Sintaks Asas
Dalam senario ini, peristiwa 'perubahan' dikaitkan dengan senarai pilihan untuk memaparkan nilai pilihan yang diubah dan menggunakan fungsi JavaScript yang sepadan.
Kod HTML
Sila lihat kod HTML berikut:
< h2 > onchange Peristiwa dalam JavaScript h2 >< hlm > Pilih bahasa lain daripada senarai. hlm >
< pilih id = 'demo' onchange = 'Sampel()' >
< nilai pilihan = 'HTML' > HTML pilihan >
< nilai pilihan = 'CSS' > CSS pilihan >
< nilai pilihan = 'JavaScript' > JavaScript pilihan >
pilih >
< p id = 'P1' > hlm >
Dalam kod di atas:
- Pertama, tentukan subtajuk menggunakan ' ” tag.
- Seterusnya, tambah satu perenggan dengan pernyataan yang dinyatakan.
- Selepas itu, '
teg ' mencipta senarai lungsur dengan id yang ditetapkan ' demo ' dan juga ' onchange ' acara mengubah hala ke fungsi ' Sampel() ”, masing-masing. - Dalam badan teg “
- Akhir sekali, perenggan kosong dibuat dengan id ' P1 ” untuk memaparkan nilai yang dipilih/diubah daripada senarai pilihan.
Kod JavaScript
Sekarang, gambaran keseluruhan kod JavaScript berikut:
< skrip >Sampel fungsi ( ) {
di mana = dokumen. getElementById ( 'demo' ) . nilai ;
dokumen. getElementById ( 'P1' ) . innerHTML = 'Pilihan yang Dipilih ialah:' + t ;
}
skrip >
Dalam blok kod di atas:
- Pertama sekali, isytiharkan fungsi bernama ' Sampel() ”.
- Dalam definisinya, gunakan ' getElementById() ' kaedah untuk mengakses nilai pilihan yang dipilih daripada senarai pilihan melalui ' nilai ” harta benda.
- Akhir sekali, paparkan nilai menggunakan ' innerHTML ” harta benda.
Pengeluaran
Seperti yang dilihat dalam output, apabila memilih pilihan daripada drop-down, peristiwa 'onchange' mencetuskan dan menggunakan fungsi yang sepadan.
Contoh 2: Menggunakan Peristiwa 'onchange' untuk Mengubah Teks Medan Input dalam Huruf Besar Menggunakan Sintaks Kaedah 'addEventListener()'
Contoh ini menerangkan peristiwa 'onchange' berfungsi dengan menukar medan teks input kepada 'Huruf Besar' dengan bantuan kaedah 'addEventListener()'.
Kod HTML
Mula-mula, pergi melalui kod HTML yang disediakan di bawah:
< h2 > onchange Peristiwa dalam JavaScript h2 >Nama : < jenis input = 'teks' ID = 'demo' >
< butang > Hantar butang >
Dalam kod HTML di atas:
- Tentukan subtajuk tahap 2 melalui “ ” tag.
- Seterusnya, tambahkan “ medan ” mengikut label “ Nama ', jenis kandungan ' teks ”, dan id yang berkaitan “ demo ”, masing-masing.
- Akhir sekali, sertakan butang menggunakan '
” tag.
Kod JavaScript
Seterusnya, lihat kod JavaScript berikut:
< skrip >dokumen. getElementById ( 'demo' ) . addEventListener ( 'ubah' , Sampel ) ;
Sampel fungsi ( ) {
di mana = dokumen. getElementById ( 'demo' ) ;
t. nilai = t. nilai . toUpperCase ( ) ;
}
skrip >
Dalam blok kod ini:
- Pertama, ' document.getElementById() kaedah 'menggunakan' ubah ' peristiwa yang akan mengakibatkan perubahan nilai medan teks input yang mempunyai id ' demo ” apabila butang klik.
- Seterusnya, fungsi 'Sample()' ditakrifkan yang menggunakan kaedah 'document.getElementById()' untuk mengakses medan teks input 'demo' dan kemudian menukar nilainya kepada 'Huruf Besar' melalui ' Huruf Besar() ” kaedah.
Pengeluaran
Seperti yang dilihat, teks input telah ditukar kepada Huruf Besar apabila butang diklik.
Kesimpulan
JavaScript menawarkan ' yang biasa digunakan onchange ” peristiwa yang tercetus sebaik sahaja keadaan nilai elemen tertentu berubah. Ia serupa dengan ' onput ” peristiwa tetapi “oninput” berlaku serta-merta apabila nilai berubah manakala peristiwa “onchange” tercetus apabila nilai peristiwa hilang fokus. Panduan ini menunjukkan objektif, kerja dan penggunaan acara 'onchange' dalam JavaScript.