Add And Remove Class On Button Click Javascript

MUAZHAN

2 min read

·

Jun 22, 2024

47

Share

Menambahkan dan Menghapus Class pada Tombol dengan JavaScript

Artikel ini akan membahas cara menambahkan dan menghapus class pada tombol dengan JavaScript. Hal ini merupakan teknik yang berguna untuk mengubah penampilan tombol, seperti mengubah warnanya atau menambahkan efek hover yang dinamis.

Menambahkan Class pada Tombol

Untuk menambahkan class pada tombol menggunakan JavaScript, kita dapat menggunakan metode classList.add(). Berikut contohnya:

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

tombol.addEventListener("click", function() {
  tombol.classList.add("aktif");
});

Kode di atas mengambil elemen tombol dengan ID tombol, dan menambahkan class aktif ke elemen tersebut saat tombol diklik.

Menghapus Class pada Tombol

Untuk menghapus class dari tombol menggunakan JavaScript, kita dapat menggunakan metode classList.remove(). Berikut contohnya:

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

tombol.addEventListener("click", function() {
  tombol.classList.remove("aktif");
});

Kode di atas akan menghapus class aktif dari tombol saat tombol diklik.

Menggabungkan Penambahan dan Penghapusan Class

Kita bisa menggabungkan kedua metode tersebut untuk membuat efek yang lebih kompleks. Misalnya, kita bisa menambahkan class aktif saat tombol diklik, dan menghapusnya saat tombol diklik lagi.

const tombol = document.getElementById("tombol");
let isActive = false;

tombol.addEventListener("click", function() {
  if (isActive) {
    tombol.classList.remove("aktif");
    isActive = false;
  } else {
    tombol.classList.add("aktif");
    isActive = true;
  }
});

Kode di atas menggunakan variabel isActive untuk melacak status tombol. Jika tombol sudah aktif, maka class aktif akan dihapus, dan sebaliknya.

Kesimpulan

Menambahkan dan menghapus class pada tombol dengan JavaScript merupakan teknik yang sederhana namun powerful untuk mengubah penampilan tombol secara dinamis. Dengan menggabungkan kedua metode tersebut, kita bisa membuat efek yang lebih kompleks dan interaktif.