DOM dan event: membuat tombol yang benar-benar bekerja

Tiga bagian sebelumnya kita hanya bermain di konsol. Sekarang JavaScript dipertemukan dengan halaman: kita akan membuat penghitung klik, tombol pengganti tema, dan sapaan yang berubah saat pengguna mengetik.

Apa itu DOM

Ketika peramban membaca HTML, ia menyusun gambaran halaman berupa pohon objek: dokumen berisi <html>, yang berisi <body>, yang berisi elemen-elemen lain. Gambaran ini disebut DOM. JavaScript tidak mengubah berkas HTML-mu; ia mengubah DOM, dan peramban langsung menampilkan perubahannya.

Memuat berkas JavaScript

Buat berkas skrip.js di folder yang sama dengan halaman, lalu muat dari dalam <head>:

<script src="skrip.js" defer></script>

Atribut defer meminta peramban menjalankan skrip setelah seluruh HTML selesai dibaca. Tanpa itu, skrip bisa berjalan sebelum tombol yang dicarinya ada, dan hasil pencariannya kosong.

Penghitung klik

Tambahkan HTML berikut di dalam <body>:

<p>Jumlah klik: <span id="jumlah">0</span></p>
<button type="button" id="tombol-tambah">Tambah</button>
<button type="button" id="tombol-ulang">Ulang</button>

Lalu tulis skripnya:

const jumlah = document.querySelector('#jumlah');
const tombolTambah = document.querySelector('#tombol-tambah');
const tombolUlang = document.querySelector('#tombol-ulang');

let hitungan = 0;

function tampilkan() {
  jumlah.textContent = String(hitungan);
}

tombolTambah.addEventListener('click', () => {
  hitungan = hitungan + 1;
  tampilkan();
});

tombolUlang.addEventListener('click', () => {
  hitungan = 0;
  tampilkan();
});

Ada tiga langkah yang akan selalu berulang dalam pekerjaan seperti ini:

• Pilih elemen. document.querySelector menerima selektor CSS dan mengembalikan elemen pertama yang cocok. Tanda # berarti mencari berdasarkan id.
• Dengarkan event. addEventListener('click', ...) mendaftarkan fungsi yang dijalankan setiap kali tombol diklik.
• Ubah halaman. textContent mengganti teks di dalam elemen.

Perhatikan bahwa nilai sebenarnya disimpan di variabel hitungan, bukan dibaca dari halaman. Halaman hanya menampilkan. Memisahkan data dari tampilan seperti ini membuat kode lebih mudah dikembangkan nanti.

Mengganti tema dengan kelas

Daripada mengubah warna satu per satu lewat JavaScript, lebih rapi menyiapkan kelas di CSS lalu menyalakan dan mematikannya.

.gelap {
  background-color: #111827;
  color: #f9fafb;
}

<button type="button" id="tombol-tema" aria-pressed="false">Tema gelap</button>

const tombolTema = document.querySelector('#tombol-tema');

tombolTema.addEventListener('click', () => {
  const aktif = document.body.classList.toggle('gelap');
  tombolTema.setAttribute('aria-pressed', String(aktif));
});

classList.toggle menambahkan kelas bila belum ada dan menghapusnya bila sudah ada, lalu mengembalikan true atau false sesuai keadaan akhirnya. Nilai itu kita pakai untuk memperbarui aria-pressed, sehingga pembaca layar tahu tombol sedang aktif atau tidak.

Menanggapi ketikan

Event tidak hanya klik. Event input terjadi setiap kali isi kolom berubah.

<label for="nama">Nama kamu</label>
<input id="nama" type="text">
<p id="sapaan">Halo!</p>

const kolomNama = document.querySelector('#nama');
const sapaan = document.querySelector('#sapaan');

kolomNama.addEventListener('input', () => {
  const nama = kolomNama.value.trim();

  if (nama === '') {
    sapaan.textContent = 'Halo!';
  } else {
    sapaan.textContent = 'Halo, ' + nama + '!';
  }
});

Isi kolom dibaca dari properti value. Metode trim() membuang spasi di awal dan akhir, sehingga kolom yang hanya berisi spasi tetap dianggap kosong.