Add And Remove Active Class On Click Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

47

Share

Menambahkan dan Menghapus Class Aktif dengan JavaScript

Dalam pengembangan web, seringkali kita perlu mengubah tampilan elemen HTML saat pengguna mengkliknya. Misalnya, kita ingin menandai menu yang aktif saat pengguna memilihnya, atau merubah warna tombol saat diklik. Untuk melakukan ini, kita bisa menggunakan class aktif dan JavaScript.

Menambahkan Class Aktif

Berikut cara menambahkan class aktif dengan JavaScript:

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

myButton.addEventListener("click", () => {
  myButton.classList.add("active");
});

Kode di atas akan menambahkan class "active" ke elemen dengan id "myButton" ketika diklik.

Menghapus Class Aktif

Untuk menghapus class aktif, gunakan metode classList.remove():

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

myButton.addEventListener("click", () => {
  myButton.classList.remove("active");
});

Kode ini akan menghapus class "active" dari elemen dengan id "myButton" ketika diklik.

Menggabungkan Penambahan dan Penghapusan

Seringkali, kita ingin menambahkan class aktif saat diklik, dan menghapusnya saat diklik lagi. Kita dapat melakukan ini dengan memeriksa apakah class aktif sudah ada:

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

myButton.addEventListener("click", () => {
  if (myButton.classList.contains("active")) {
    myButton.classList.remove("active");
  } else {
    myButton.classList.add("active");
  }
});

Kode ini akan menambahkan class "active" jika belum ada, dan menghapusnya jika sudah ada.

Contoh Implementasi

Berikut contoh sederhana menggunakan CSS dan JavaScript untuk mengubah warna latar belakang tombol saat diklik:

HTML:

Klik Saya

CSS:

.active {
  background-color: blue;
}

JavaScript:

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

myButton.addEventListener("click", () => {
  if (myButton.classList.contains("active")) {
    myButton.classList.remove("active");
  } else {
    myButton.classList.add("active");
  }
});

Dengan kode di atas, tombol akan berubah warna menjadi biru saat diklik, dan kembali ke warna default saat diklik lagi.

Kesimpulan

Menggunakan class aktif dengan JavaScript memungkinkan kita untuk mengubah tampilan elemen HTML secara dinamis berdasarkan interaksi pengguna. Dengan sedikit kode, kita dapat membuat pengalaman pengguna yang lebih interaktif dan responsif.