merubah warna list pada baris ganjil dan genap menggunakan perulangan while dan do

Membuat List Yang Bisa Diubah Warnanya menggunakan while-loops dan do loops

Kode html-nya:

<ul id="myList">

       <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>

   

    <label for="colorSelector">warna angka genap</label>

        <select id="colorSelector" onchange="ubahWarna()">

            <option value="blue">Blue</option>

            <option value="green">Green</option>

            <option value="yellow">Yellow</option>

        </select>

<br>

    <label for="colorList">Pilih Warna untuk List Ganjil</label>

        <select id="colorList" onchange="changeColor()">

            <option value="red">Merah</option>

            <option value="purple">Ungu</option>

            <option value="grey">Abu-abu</option>

        </select>

Berikut adalah kode pada js:

function ubahWarna() {

    var selectElement = document.getElementById("colorSelector");

    var selectedColor = selectElement.value;

   

    var listItems = document.querySelectorAll("#myList li");

    var i = 1;

    while (i < listItems.length) {

        listItems[i].style.color = selectedColor;

        listItems[i].style.fontWeight = "bold";

        i += 2

    }

}

function changeColor() {

    var selectElement = document.getElementById("colorList");

    var selectedColor = selectElement.value;

   

    var listItems = document.querySelectorAll("#myList li");

    var j = 0;

    do {

        listItems[j].style.color = selectedColor;

        listItems[j].style.fontWeight = "bold";

       

        j += 2;

    }

    while (j < listItems.length);

}

Kode di atas menciptakan sebuah halaman web dengan sebuah daftar tak terurut (unordered list) dan dua dropdown. Setiap dropdown memungkinkan pengguna memilih warna untuk angka genap dan ganjil dalam daftar, dan terdapat dua fungsi JavaScript (ubahWarna() dan changeColor()) yang disertakan untuk mengubah warna dan memberikan efek teks pada item-item tertentu dalam daftar berdasarkan pilihan pengguna di dropdown.

output dari kode tersebut