Cara Merubah Warna Background Body dengan Bantuan Javascript

Memberikan warna pada sebuah tampilan website, memang hal yang wajib, jadi jika kita tidak ada warna website kita akan tampil hitam putih seperti tampilan televisi jaman dahulu, sungguh sangat tidak cantik ya, dan tidak sarankan, dan biasanya kita kita memberikan warna pada backgroundnya, itu pasti hal yang sering di style pertama saat membuat website, body backgroundnya apa pasti itu, biasanya kita membuat warna pada background gambar dengan satu style saja, bagaimana jika cara merubah warna background body dengan bantuan Javascript, iya betul dengan javascript kita bisa mengubah-ubahnya tanpa perlu menstyle ulang CSSnya, oke jangan kemana-mana simak terus ya

Oke dengan sedikit bantuan dari javascript kita bisa mengatur acak warna pada background body, sebenarnya tidak hanya body ya, tapi kita juga bisa menggunakan pada tag-tag yang lain tapi kebetulan disini saya akan mencobanya dengan tag body, supaya terlihat jelas efeknya dan memang tag body sering di style warnannya, oke yang harus teman-teman persiapkan untuk cara merubah warna background body dengan bantuan Javascript, adalah:

• saya membuat menu tombol dengan tag button, dimana tombol ini adalah untuk mengeksekusi ketika di klik tombolnya, warna background pada body akan berubah.

var btn = document.querySelector('button');

• selanjutnya saya membuat function untuk menampung random waran ketika kita klik, jadi ketika kita klik warnanya itu akan terpilih secara acak ya teman-teman.

 function random(number) {
          return Math.floor(Math.random()*(number+1));
        }

• selanjutnya, saya membuat tombol itu berfungsi dengan javascript, dengan even onclick seperti ini, lalu kita panggil bodynya lalu kita style :

btn.onclick = function() {
          var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
          document.body.style.backgroundColor = rndCol;
        }

Oke dan ini struktur lengkap template dan Javascriptnya:

<!DOCTYPE html>
<html>
<head>
	<title>cara merubah warna background body dengan bantuan Javascript</title>
	<-e-style type="text/css">
		.container{
			width: 500px;
			margin: auto;
			background: #F3F3F3;
			box-shadow: 5px 5px 5px 5px #555;
			text-align: center;
		}
		.container_2{
			width: 60px;
			margin: auto;
		}
		button{
			margin: 10px 
		}
		
	</style>
</head>
<body>
	<div class="container">
		<h1>cara merubah warna background body dengan bantuan Javascript</h1>
		<h3><u>Absensi Mahasiswa</u></h3>
		<button>Change color</button>
		</div>
	</div>
	<-e-script type="text/javascript">
        var btn = document.querySelector('button');

        function random(number) {
          return Math.floor(Math.random()*(number+1));
        }

        btn.onclick = function() {
          var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
          document.body.style.backgroundColor = rndCol;
        }
    </script>
</body>
</html>

seperti itulah strukutur yang sudah saya gunakan ya, disni saya mengambil refrensi dari mozila developers, oke bagaimana hasilnya seperti inilah hasilnya:

Tampilan dimana saya belum mengklik change colors

ketika saya klik dan saya klik dan seterusnya warna pada background gambar akan berubah-ubah, dengan warna yang berbeda-beda, oke saya rasa cukup sampai disini belajar kita tentang cara merubah warna background body dengan bantuan Javascript, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.