Cara Mengubah Warna Background dengan Javascript

Hai, pada pertemuan kali ini saya akan sedikit membahas mengenai bagaimana Cara Mengubah Warna Background dengan Javascript, seperti yang kita ketahui bahwa fungsi dari javascript adalah untuk membuat sebuah interaksi antara user dengan web itu sendiri. Nah kali ini saya akan memberikan sedikit gambaran interaksi antara user dengan web, dimana kita akan mencoba membuat sebuah button yang bilamana button diklik maka akan ada perubahan pada background. Simak uraiannya berikut ini.

Pada kasus ini, kita membutuhkan bebrapa buah button untuk demo nya, silahkan kalian bisa ketikan kode HTML berikut untuk membuat 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 pada bagian button kita tambahkan attribut onclick untuk nanti kita panggil di javascriptnya. Kalau sudah, selanjutnya kita akan membuat fungsi 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>

Pada fungsi javascript ini kita menggunakan perintah if, dimana kita diberikan kondisi dengan nilai yang sudah ditentukan, kalau sudah semua kode diatas diketikan, simpan terlebih dahulu kemudian coba jalankan pada browser masing-masing dan lihat hasilnya.

Baik, sekian pembahasan mengenai Cara Mengubah Warna Background dengan Javascript, semoga bermanfaat, amin.

Selamat mencoab 🙂

DEMO