Add Event Listener Javascript Onchange

MUAZHAN

3 min read

·

Jun 22, 2024

38

Share

Menambahkan Event Listener "onChange" di JavaScript

Event listener onChange dalam JavaScript digunakan untuk mendeteksi perubahan pada elemen HTML. Biasanya, event ini dikaitkan dengan elemen form seperti input text, textarea, select, dan checkbox, tetapi juga dapat diterapkan pada elemen lain seperti <div> atau <span>.

Penggunaan onChange

Berikut adalah contoh dasar bagaimana menggunakan onChange pada elemen input text:

Kode di atas akan menampilkan teks "Anda memasukkan: [isi input]" di elemen <p> dengan id "demo" setiap kali nilai pada input text dengan id "myInput" berubah.

Menambahkan Event Listener dengan JavaScript

Anda juga bisa menambahkan event listener onChange menggunakan JavaScript, seperti ini:

Kode ini melakukan hal yang sama dengan contoh sebelumnya, namun menggunakan JavaScript untuk menambahkan event listener onChange ke elemen input text.

Contoh Penggunaan Lain

Berikut adalah beberapa contoh penggunaan lain dari onChange event listener:

• Validasi form: Menjalankan validasi input form saat nilai berubah.
• Pembaruan nilai: Mengubah nilai elemen lain berdasarkan perubahan nilai input.
• Menampilkan informasi: Menampilkan informasi tambahan saat nilai input berubah.
• Memuat data: Memuat data dinamis berdasarkan nilai input.

Keuntungan Menggunakan onChange

• Responsif: onChange memungkinkan Anda untuk bereaksi terhadap perubahan nilai input secara real-time.
• Kemudahan penggunaan: Penambahan event listener onChange sangat mudah.
• Efisien: Event onChange hanya dipicu saat nilai input benar-benar berubah.

Kesimpulan

onChange adalah event listener yang berguna untuk merespons perubahan nilai input. Ini memungkinkan Anda untuk membuat aplikasi web yang lebih interaktif dan dinamis. Gunakan onChange untuk memberikan pengalaman yang lebih baik bagi pengguna dan tingkatkan fungsi aplikasi web Anda.