Cara Mengubah Warna Background dengan Javascript

Hallo, di pertemuan kali ini saya akan sedikit membahas mengenai bagaimana Cara Mengubah Warna Background dengan Javascript, seperti yang kita ketahui bahwa guna dari javascript yakni bagi merancang sebuah interaksi antara user dengan web itu sendiri. Nah kali ini saya akan memberikan sedikit sekilas interaksi antara user dengan web, dimana kita akan mencoba merancang sebuah button yang bilamana button diklik karenanya akan ada perubahan di background. Simak uraiannya berikut ini.



Di kasus ini, kita membutuhkan bebrapa buah button bagi demo nya, silahkan kalian dapat ketikan kode HTML berikut bagi merancang button.



<body>
<button onclick=warna(1)>Merah</button>
<button onclick=warna(2)>Kuning</button>
<button onclick=warna(3)>Hijau</button>
<button onclick=warna(4)>Biru</button>
</body>


Nah di bagian button kita tambahkan attribut onclick bagi nanti kita panggil di javascriptnya. Kalau telah, berikutnya kita akan merancang guna javascript seperti berikut.



<script type=text/javascript>
function warna (pilih) {
if (pilih == 1) document.body.style.backgroundColor = red;
else if (pilih == 2) document.body.style.backgroundColor = yellow;
else if (pilih == 3) document.body.style.backgroundColor = green;
else if (pilih == 4) document.body.style.backgroundColor = blue;
}
</script>


Di guna javascript ini kita menggunakan command if, dimana kita diberikan kondisi dengan nilai yang telah ditentukan, kalau telah seluruh kode diatas diketikan, simpan terlebih dahulu kemudian coba jalankan di browser masing-masing dan lihat hasilnya.



Bagus, demikianlah pembahasan mengenai Cara Mengubah Warna Background dengan Javascript, semoga bermanfaat, amin.



Selamat mencoab 🙂



DEMO



 




Sumber https://kursuswebsite.org

Popular posts from this blog

Cara Menghapus Isi Dari Form Input Menggunakan Javascript

Membuat Form Menarik Menggunakan HTML dan CSS