Nama : Bintang Dwi Anggara
Kelas : X-RPL
Kali ini kita akan membuat mengubah elemnt text yang akan diubah menjadi text yang berwarna seperti yang ada dibawah dimana warna elemnt ganjil dan warna elemnt genapa kita dapat setting berbagai warna yang sudah terdapat discript javascript.
Seperti di bawah ini adalah code seperti ada yang diatas dan disini saya akan membahas mengenai code code dan fungsinya :
<!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>
Langkah langkah
1.) Menambahkan elment html dengan menggunakan ('ul') dan ('li')
<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>
2.) Lalu kita tambahkan sebuah element select dengan id select genap(kode yang akan dipanggil ketika javascript dijalankan) dan onchange evencolor(sebuah id untuk memanggil warna ketika code javascript dijalankan) lalu untuk option adalah pilihan antara warna warna dan juga terdapat value berisi warna merah,hijau,dan biru.
<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>
3.) Lalu kita masuk mengenai script berikut contoh codenya :
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");
(Let) kegunaan dari adalah sebuah id dari kode javascript dan disini kita menggunakan ('documnt.getelmentByid') fungsinya adalah untuk menyimpan sebuah data dan akan berjalan ketika code javascript dijalankan dan code diatas menyimpan sebuah data select genap select ganjil dan data warna merah hijau dan juga biru.
4.) lalu kita tambahkan code function dan kondisi while,if,dan else
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++; } }
pertama kita menambahkan function dengan nama evenColor, kegunaannya menambahkan style color pada list genap.
kegunaan dari lat index 0 code ini dihitung dari angka 0 dalam array nomer 0 itu adalah satu jika nomernya 1 maka angkanya adalah 2 jadi disni kita menggambil array 0 atau nomer 1 (genap)
dan untuk while (index < list.length) penjela saanya adalah
jika index lebih besar dari pada angka list maka kegunaanya adalah untuk mengiterasi melalui elemen-elemen dalam list. Loop ini akan terus berjalan selama nilai index kurang dari panjang list.
if (index % 2 == 0) kegunaan Dalam kondisi ini, kita memeriksa apakah nilai index merupakan angka genap. Jika ya, maka kita melanjutkan untuk mengubah warna teks elemen selanjutnya pada list.if (selectGenap.value == "red") { ... } :
else if (selectGenap.value == "green") { list[index + 1].style.color = "green"; } else if (selectGenap.value == "blue") { list[index + 1].style.color = "blue";}
Tidak ada komentar:
Posting Komentar