JAVASCRIPT PROJECT
MODULE 5 PROJECT 3
• Buatlah sebuah halaman HTML (lihat halaman berikutnya)
• Apabila warna elemen genap dirubah, maka elemen li yang genap akan berubah warnanya menyesuaikan warna yg terpilih.
• Apabila warna elemen ganjil dirubah, maka elemen li yang ganjil akan berubah warnanya menyesuaikan warna yg terpilih.
• Gunakan While Loop pada elemen genap dan Do While Loop pada elemen ganjil
BERIKUT INI ADALAH CONTOH KODE HTMLNYA :
<!-- project 3 -->
<!-- LIST ITEM -->
<ul id="nama">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
<!-- UNTUL MERUBAH WARNA -->
<label for="Colorselector">Ubah wana ganjil</label>
<select id="even" onchange="ubahEven()">
<option value="blue">blue</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
</select>
<label for="Colorselector">ubah warna genap</label>
<select id="old" onchange="ubahOld()">
<option value="green">green</option>
<option value="pink">pink</option>
<option value="brown">brown</option>
</select>
DAN INI ADALAH KODE JAVASCRIPT NYA :
<script>
function tombol() {
var ubah = document.querySelectorAll("#My li")
for (i = 0; i < ubah.length; i++){
if (i % 2 != 0){
ubah[i].classList.add('blue-bold');
} else{
}
}
}
function ubahEven(){
var selectElement = document.getElementById("even")
var colorSelect = selectElement.value;
var itemList = document.querySelectorAll("#nama li")
var i=1;
while (i < itemList.length) {
itemList[i].style.color = colorSelect;
itemList[i].style.fontWeight = "bold"
i += 2
}
}
function ubahOld() {
var selectElement = document.getElementById("old")
var selectColor = selectElement.value;
var listItem = document.querySelectorAll("#nama li")
var j = 0;
do {
listItem[j].style.color = selectColor;
listItem[j].style.fontWeight ="bold";
j += 2
}
while (j < listItem.length)
}
</script>
DAN INI ADLAH HASILNYA :
 |
INI JIKA YG DIPILIH ANGKA GENAP:
DAN INI APABILA DIUBAH KEDUANYA
Komentar
Posting Komentar