Latihan 2: DOM Advanced — JavaScript

Latihan 2 dari materi DOM Advanced di JavaScript — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Di HTML sudah ada <ul id="menu"> berisi tiga <li>: Beranda, Tentang, Kontak. Variabel menu sudah menunjuk ke situ. Tandai item yang diklik pakai event delegation:

Pasang satu listener click di menu, bukan di tiap <li>.
Di dalamnya, cek bahwa e.target.tagName === 'LI'.
Tambahkan class aktif ke item yang diklik dengan e.target.classList.add('aktif'). classList.toggle('aktif') juga boleh.

Sebelum ada yang diklik, belum boleh ada item yang punya class aktif. Klik Beranda, Beranda yang dapat aktif. Klik Kontak, Kontak yang dapat.

Hint

Klik di <li> naik sampai ke <ul>, jadi cukup satu pendengar di <ul>, lalu cari tahu item mana yang diklik.
Pakai menu.addEventListener('click', ...). Di dalamnya, e.target adalah item yang diklik, dan classList.add menambah class ke item itu.
menu.addEventListener('click', (e) => { if (e.target.tagName === 'LI') { e.target.classList.add('aktif') } })

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: DOM Advanced — JavaScript

Hint

Memperbarui Aplikasi