Cara Mengganti Warna Menggunakan Javascript

Dalam kesempatan kali ini kita kan belajar membuat tentang bagaimana cara mengubah warna object menggunakan Javascript. Dalam kasus ini saya akan menampilkan sebuah object mobil yang bisa diganti warna mobilnya. Lalu bagaimana cara menggantinya yuk mari simak dalam pembahasan dibawah ini:

Baiklah sebelum dimulai sahabat bisa menyimpan gambar mobil atau object benda lain supaya nanti bisa berganti warna. Jadi saat kita klik pada gambar akan berubah warna. yuk langsung saja ikutin langkah-langkah berikut ini:

Langkah pertama:

Buat file HTML yang berisi code seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Mengubah Background Dengan Javascript</title>
<img src="car.jpg" alt="">
	<div id="bg"></div>

Lalu selanjutnya tambahkan style css seperti berikut:

*{
			margin: 0;
			padding: 0;
		}
		body{overflow: hidden;}
		#bg{
			position: absolute;
			top:0;
			width: 100%;
			height: 100vh;
			mix-blend-mode: hue;
		}
		img{width: 100%}

Langkah Kedua

Nah sekarang tinggal menambahkan script dari javascript yang bisa sahabat ketikkan seperti dibawah ini:

const bg = document.getElementById('bg');
		function randomColor(){
			return Math.floor(Math.random() * 255);
		}
		bg.addEventListener('click', () =>{
			bg.style.backgroundColor = 'rgba('+randomColor()+','+randomColor()+','+randomColor()+')'
		})

Apabila sudah selesai mengetikkan semua code diatas, coba simpan lalu jalankan pada browser masing-masing. Dan hasilnya kan seperti tampilan berikut ini:

Saya kira cukup dalam pembahasan kali ini semoga dapat menambah referensi belajar sahabat semua. Selamat mencoba dan sampai jumpa.

terima kasih