Dalam artikel ini, kita akan membahas sebuah contoh sederhana tentang cara
mengubah warna teks elemen list HTML menggunakan JavaScript.
Tujuan Program
Tujuan dari program ini adalah untuk mengubah warna elemen list yang genap
menjadi biru ketika button di klik. Contohnya seperti di gambar berikut:
Source Code
Kalian bisa mencoba kode berikut secara langsung dengan mengklik link
ini [JSFiddle Link]
Github Repository untuk Mini Project modul Pengenalan Javascript : [Repository]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .biru-dan-tebal { color: blue; font-weight: bolder; } </style> </head> <body> <ul> <li>Acura</li> <li>Alfa Romeo</li> <li>Aston Martin</li> <li>Audi</li> <li>Bentley</li> <li>BMW</li> <li>Bugatti</li> <li>Buick</li> </ul> <ol> <li>Acura</li> <li>Alfa Romeo</li> <li>Aston Martin</li> <li>Audi</li> <li>Bentley</li> <li>BMW</li> <li>Bugatti</li> <li>Buick</li> </ol> <button onclick="changeListColor()">Ubah Warna Elemen Genap</button> <script> function changeListColor() { // get element (tipe data Array) let list = document.getElementsByTagName("li"); // iterasi Array for loops (check index satu per satu) for (let index = 0; index < list.length; index++) { // jika i dibagi 2 memiliki sisa 0 (genap)... if (index % 2 === 0) { // akses list dari iterasi index ditambah 1 (index dimulai dari 0) // tambahkan class "biru-dan-tebal" list[index + 1].className = "biru-dan-tebal"; } } } </script> </body> </html>
Pembahasan
1. Menambahkan Struktur Elemen List HTML
Pertama-tama, kita bisa buat struktur awal HTML
<!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> <!-- Tambahkan elemen HTML disini --> </body> </html>
Kemudian, kita tambahkan elemen list (ordered dan unordered) dengan isi
nama-nama merk mobil didalam tag
<body>
... <body> <ul> <li>Acura</li> <li>Alfa Romeo</li> <li>Aston Martin</li> <li>Audi</li> <li>Bentley</li> <li>BMW</li> <li>Bugatti</li> <li>Buick</li> </ul> <ol> <li>Acura</li> <li>Alfa Romeo</li> <li>Aston Martin</li> <li>Audi</li> <li>Bentley</li> <li>BMW</li> <li>Bugatti</li> <li>Buick</li> </ol> </body> ...
Dari tag HTML tersebut akan ditampilkan di website seperti gambar ini
2. Menambahkan script Javascript
Setelah membuat halaman web dengan HTML. selanjutnya, kita harus membuat
function agar elemen list yang genap bewarna biru. Caranya, kita bisa gunakan
'for loop'.
... <script> function changeListColor() { let list = document.getElementsByTagName("li"); for (let index = 0; index < list.length; index++) { if (index % 2 === 0) { list[index].style.color = "blue"; list[index].style.fontWeight = "bolder"; } } } </script> ...
Pembahasan Kode Javascript
1. Tambahkan tag <script> di
dokumen HTML
...
<script></script>
...
2. Di dalam tag <script> tersebut,
Deklarasi function untuk merubah warna list. Kita beri nama changeListColor().
<script> function changeListColor() { ... } </script>
3. Buat variabel list, dapatkan elemen HTML list dengan syntax
document.getElementByTagName. Syntax tersebut mendapatkan elemen HTML list yang disimpan di dalam sebuah
Array.
<script> function changeListColor() { let list = document.getElementsByTagName("li"); ... } </script>
4. Untuk mengakses elemen yang ada di Array tersebut, kita bisa gunakan
for loop. Kegunaan for loop ini adalah kita bisa mengakses setiap data (index) yang
ada di sebuah Array dan mengeksekusi kode untuk setiap index-nya. For loop
membutuhkan 3 parameter, yakni :
- Inisialisasi, biasanya membuat variabel untuk nilai
awal index.
- Kondisi, bagian yang menentukan apakah loop akan
berjalan lagi atau tidak. Jika kondisi benar (true), lanjutkan looping. Jika
tidak (false), stop looping.
- Perubahan, bagian ini dieksekusi setiap iterasi (atau setelah kondisi
masih benar/true). Biasanya digunakan untuk menambah (increment) atau
mengurang (decrement) nilai variabel pada inisialisasi.
<script> function changeListColor() { let list = document.getElementsByTagName("li"); for (let index = 0; index < list.length; index++) { ... } } </script>
5. Formula untuk mencari angka genap dalam pemrogramman adalah dengan
menggunakan modulus operator (mengembalikan sisa dari hasil pembagian).
Pada for loop, kita tambahkan
conditional if. Jika index dibagi dua menghasilkan sisa nol (tidak ada sisanya/angka
genap), maka akan mengeksekusi kode yang ada di dalam if tersebut.
<script> function changeListColor() { let list = document.getElementsByTagName("li"); for (let index = 0; index < list.length; index++) { if (index % 2 === 0) { ... } } } </script>
6. Di dalam conditional if, ada baris kode yang mengakses setiap index
variabel list (dalam hal ini Array yang mengandung elemen HTML list) dan
menambahkan styling CSS.
<script> function changeListColor() { let list = document.getElementsByTagName("li"); for (let index = 0; index < list.length; index++) { if (index % 2 === 0) { list[index].style.color = "blue"; list[index].style.fontWeight = "bolder"; } } } </script>
7. Jangan lupa buat button di dokumen HTML agar function bisa di eksekusi.
... <button onclick="changeListColor()">Ubah Warna Elemen Genap</button> ...
Dari gambar tersebut bisa kita lihat terjadi kesalahan, yakni elemen list
yang diberi styling adalah list yang ganjil. Hal tersebut terjadi karena
Index Array dimulai dari angka 0 (nol). Jadi, elemen list pertama
(index 0) terkena styling, elemen list kedua (index 1) tidak dikenai
styling, elemen list ketiga (index 2) terkena styling, dan seterusnya. Untuk
memperbaiki kesalahan ini, kita bisa gunakan beberapa cara:
1. Index ditambah nilai 1
<script> function changeListColor() { let list = document.getElementsByTagName("li"); for (let index = 0; index < list.length; index++) { if (index % 2 === 0) { list[index + 1].style.color = "blue"; list[index + 1].style.fontWeight = "bolder"; } } } </script>
2. Conditional if. Jika index % 2 hasilnya bukan 0, Jalankan kode
<script> function changeListColor() { let list = document.getElementsByTagName("li"); for (let index = 0; index < list.length; index++) { if (index % 2 !== 0) { list[index].style.color = "blue"; list[index].style.fontWeight = "bolder"; } } } </script>
3. Conditional if. Jika index % 2 hasilnya 1, Jalankan kode
<script> function changeListColor() { let list = document.getElementsByTagName("li"); for (let index = 0; index < list.length; index++) { if (index % 2 === 1) { list[index].style.color = "blue"; list[index].style.fontWeight = "bolder"; } } } </script>
Kita juga bisa rubah styling yang ada di Javascript menjadi styling CSS
terpisah dan gunakan method
.ClassName untuk menambahkan class CSS ke list HTML.
... <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .biru-dan-tebal { color: blue; font-weight: bolder; } </style> </head> ...
... <script> function changeListColor() { let list = document.getElementsByTagName("li"); for (let index = 0; index < list.length; index++) { if (index % 2 === 0) { list[index + 1].className = "biru-dan-tebal"; } } } </script> ...
0 Komentar