Changing Color list (modul 5 project 3)
Pada kesempatan kali ini saya akan membuat list yang jika warna elemen genap
dirubah, maka elemen li yang genap akan berubah warnanya menyesuaikan warna yg
terpilih dan apabila warna elemen ganjil dirubah, maka elemen li yang ganjil akan
berubah warnanya menyesuaikan warna yg terpilih dengan menggunakan While Loop pada
elemen genap dan Do While Loop pada elemen ganjil
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
<hr />
<label>Warna Elemen Genap</label>
<select name="color" id="selectGenap" onchange="evenColor()">
<option>Select Color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<br />
<label>Warna Elemen Ganjil</label>
<select name="color" id="selectGanjil" onchange="oddColor()">
<option>Select Color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<script>
let list = document.getElementsByTagName("li");
let selectGenap = document.getElementById("selectGenap");
let selectGanjil = document.getElementById("selectGanjil");
let red = document.getElementById("selectRed");
let green = document.getElementById("selectGreen");
let blue = document.getElementById("selectBlue");
function evenColor() {
let index = 0;
while (index < list.length) {
if (index % 2 == 0) {
if (selectGenap.value == "red") {
list[index + 1].style.color = "red";
} else if (selectGenap.value == "green") {
list[index + 1].style.color = "green";
} else if (selectGenap.value == "blue") {
list[index + 1].style.color = "blue";
} else {
list[index + 1].style.color = "";
}
}
index++;
}
}
function oddColor() {
let index = 0;
do {
if (index % 2 == 0) {
if (selectGanjil.value == "red") {
list[index].style.color = "red";
} else if (selectGanjil.value == "green") {
list[index].style.color = "green";
} else if (selectGanjil.value == "blue") {
list[index].style.color = "blue";
} else {
list[index].style.color = "";
}
}
index++;
} while (index < list.length);
}
</script>
</body>
</html>
Berikut penjelasan lebih rinci tentang JavaScript-nya:
1. Variabel list menampung semua elemen <li> yang ada pada halaman.
2. Variabel selectGenap dan selectGanjil menangkap elemen dropdown untuk warna elemen
genap dan ganjil.
3. Fungsi evenColor() akan dipanggil setiap kali terjadi perubahan pada dropdown warna
elemen genap. Fungsi ini akan mengubah warna elemen ganjil dari daftar tersebut
sesuai dengan pilihan yang dipilih dari dropdown. Perubahan dilakukan pada indeks
genap (elemen ganjil) dalam daftar.
4. Fungsi oddColor() akan dipanggil setiap kali terjadi perubahan pada dropdown warna
elemen ganjil. Fungsi ini akan mengubah warna elemen genap dari daftar tersebut
sesuai dengan pilihan yang dipilih dari dropdown. Perubahan dilakukan pada indeks
ganjil (elemen genap) dalam daftar.
Hasilnya:
Komentar
Posting Komentar