pada tutorial kali ini kita akan melakukan coding untuk membuat website yang bisa mengubah warna elemen menggunakan javascript dimana nanti kita akan menargetkan id elemen yang akan di ubah warna nya.

langsung saja kita buka visual studio untuk membuat kode nya. buat file html dengan nama apa saja yang kamu mau untuk membuat web statis dan ketikan kode berikut ini:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Change Background Color</title>
    <style>
      body {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <button id="changeColor">Change Color</button>
 
    <script>
      const button = document.querySelector("#changeColor");
      const colors = ["red", "blue", "green", "purple", "pink"];
 
      button.addEventListener("click", function () {
        const randomIndex = Math.floor(Math.random() * colors.length);
        document.body.style.backgroundColor = colors[randomIndex];
      });
    </script>
  </body>
</html>

selesai kita bisa buka file html nya gak usah pake xampp langsung klik aja 2 kali untuk mencoba apakah kode yang kita buat sudah benar.

akan tampil gambar seperti di atas ini bila kalian mengklik button nya background nya akan berubah warna nya sesuai dengan nilai yang sudah kita masukan pada array.

Penjelasan Singkat

kalian pasti sudah lumayan paham setelah mengetikan kode tadi yang bisa kita ambil keseimpulan adalah kita menggunakan baris <button id="changeColor">Change Color</button> sebagai elemen yang di targetkan.

dengan mengetikan const button = document.querySelector("#changeColor"); sudah ter inisialisasi bahwa id="changeColor" dipilih sebagai trigger untuk mengubah warna.

di baris const colors = ["red", "blue", "green", "purple", "pink"]; kita mengetikan 5 warna berbeda yang nanti nya akan dipilih secara acak sebagai warna background.

pada baris const randomIndex = Math.floor(Math.random() * colors.length); sudah jelas bahwa kita kan melakukan pemilihan data acak melalui fungsi Math.random dengan javascript.

lalu menerapkan warna yang sudah dipilih secara acak di document.body.style.backgroundColor = colors[randomIndex]; di tulis document.body sebagai elemen yang diubah warna nya arti nya elemen body html akan berubah warna nya.

itu tadi tutorial sederhana mengubah warna menggunakan java script semoga kalian meyukainya.