Fungsi ubah warna kotak elemen div dengan javascript

Javascript dapat membuat aplikasi berbasis web lebih interaktif. Salah satu kelebihannya yaitu bahasa scripting ini mampu memanipulasi elemen html bahkan memanipulasi css pada sebuah dokumen web. Tutorial ini akan membahas salah satu kelebihan javascript dalam memanipulasi elemen html.

Fungsi ini pada hakikatnya hanya merubah nama class pada elemen div yang dikenai aksi klik. Saya menggunakan dua nama class yaitu .normal dan .abnormal. Dimana dua class ini telah diberi efek warna berbeda melalui css. Secara umum html dari elemen div yang akan kita manipulasi berbentuk seperti ini:

<div class="normal" onclick="ubah(this)"></div>

Attribute onclick memberi perintah jika ada aksi klik terhadap elemen ini maka jalankan fungsi ubah(), sedangkan this berarti menunjukkan elemen yang terkenai aksi. Fungsi ubah() terletak pada javascript yang akan kita buat nanti.

Agar elemen div terlihat, perlu kita beri aturan yang tegas untuk setiap div yaitu memiliki lebar dan tinggi 100px dan memiliki garis tepi setebal 1px berwarna hitam. Yang saya inginkan ketika elemen div memiliki atribut class bernama normal maka dia memiliki background berwarna merah, sedangkan div dengan class bernama abnormal dia akan berwarna hitam. Terjemahan ke bentuk css kurang lebih seperti ini:

div {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.normal {
    background-color: red; 
}

.abnormal {
    background-color: black;  
}

Dengan logika sederhana kita dapat membuat fungsi untuk merubah class dari semula bernama class normal menjadi class abnormal.

Logika:

Jika elemen ini memiliki atribut class bernama normal maka rubah menjadi abnormal

function ubah(yo){
    if (yo.className == "normal"){
        yo.className = "abnormal";
    }
}

Demo Awal

Dari demo di atas kita telah berhasil merubah kotak menjadi berwarna hitam saat aksi klik terjadi pada kotak tersebut. Namun kelemahannya kita tidak dapat merubah kembali ke keadaan semula. Sehingga diperlukan suatu pengecekan kondisi.

Peraturan kondisi:

Jika elemen ini memiliki atribut class bernama normal maka rubah menjadi abnormal. Namun sebaliknya jika bernama abnormal balik class menjadi normal. Jika bukan keduanya maka ubah saja nama class-nya menjadi abnormal!

Sesuai logika di atas, jika ditulis menggunakan javascript kurang lebih bentuk scriptnya menjadi:

function ubah(yo){
    if (yo.className == "normal"){
        yo.className = "abnormal";
    }
    else if (yo.className == "abnormal") {
        yo.className = "normal";
    }
    else {
        yo.className = "abnormal";  
    }
}

Pada demo hasil akhir, saya membuat beberapa elemen div yang memiliki class berbeda dari kedua class yang telah kita atur. Karena pada pengecekan kondisi di atas, telah disertakan pula argumen "jika bukan class normal ataupun abnormal maka jadikan class abnormal" sehingga saat terjadi klik pada class lain akan otomatis menjadi class abnormal.

Demo hasil akhir