Addeventlistener Change Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

34

Share

Memahami addEventListener "change" dalam JavaScript

addEventListener adalah metode penting dalam JavaScript yang memungkinkan kita untuk mendengarkan dan merespons berbagai event yang terjadi pada elemen HTML. Salah satu event yang paling umum adalah "change", yang terjadi ketika nilai suatu elemen berubah.

Dalam artikel ini, kita akan membahas bagaimana menggunakan addEventListener "change" untuk menangani perubahan nilai pada elemen HTML, khususnya pada input text, textarea, select, dan checkbox.

Penggunaan Dasar addEventListener "change"

1. Pilih elemen: Pertama, kita perlu memilih elemen HTML yang ingin kita pantau perubahannya. Kita bisa menggunakan berbagai metode seperti:

   • document.getElementById("myElement") untuk memilih elemen berdasarkan ID-nya.
   • document.querySelector(".myClass") untuk memilih elemen berdasarkan kelasnya.
   • document.querySelectorAll("input[type=text]") untuk memilih semua elemen input text.

2. Tambahkan event listener: Setelah memilih elemen, gunakan addEventListener untuk menambahkan listener "change" ke elemen tersebut. Fungsi yang akan dijalankan ketika terjadi perubahan nilai akan menjadi parameter kedua.

const myInput = document.getElementById("myInput");

myInput.addEventListener("change", function() {
  // Kode yang akan dijalankan ketika nilai input berubah
  console.log("Nilai input berubah menjadi: " + this.value);
});

Dalam contoh di atas, ketika nilai input dengan ID "myInput" berubah, fungsi callback akan dijalankan. Fungsi tersebut kemudian akan mencetak nilai baru input ke console.

Contoh Penggunaan dengan Berbagai Elemen

1. Input Text

const textInput = document.getElementById("textInput");

textInput.addEventListener("change", function() {
  console.log("Nilai input text: " + this.value);
});

2. Textarea

const textArea = document.getElementById("textArea");

textArea.addEventListener("change", function() {
  console.log("Nilai textarea: " + this.value);
});

3. Select (Dropdown List)

  Value 1
  Value 2

const mySelect = document.getElementById("mySelect");

mySelect.addEventListener("change", function() {
  console.log("Nilai select: " + this.value);
});

4. Checkbox

const myCheckbox = document.getElementById("myCheckbox");

myCheckbox.addEventListener("change", function() {
  if (this.checked) {
    console.log("Checkbox dicentang");
  } else {
    console.log("Checkbox tidak dicentang");
  }
});

Kesimpulan

addEventListener "change" adalah alat yang ampuh dalam JavaScript untuk menangani perubahan nilai pada berbagai elemen HTML. Dengan menggunakannya, kita dapat membuat aplikasi web yang lebih interaktif dan responsif terhadap tindakan pengguna.