JavaScript DOM dari Nol: Bikin Halaman Interaktif

HTML menyusun isi, CSS mengatur tampilannya, dan JavaScript dapat merespons tindakan pengguna. Penghubungnya adalah DOM (Document Object Model): representasi dokumen yang dapat dibaca dan diubah melalui JavaScript.

Mari buat penghitung kecil. Contoh ini sengaja memakai satu tombol dan satu elemen hasil supaya alurnya mudah diikuti.

<button id="tambah" type="button">Tambah</button>
<output id="jumlah" aria-live="polite">0</output>

<script>
  const tombol = document.querySelector("#tambah");
  const hasil = document.querySelector("#jumlah");
  let jumlah = 0;

  tombol.addEventListener("click", () => {
    jumlah += 1;
    hasil.textContent = String(jumlah);
  });
</script>

querySelector mencari elemen berdasarkan selector CSS. addEventListener mendaftarkan fungsi yang berjalan saat tombol diklik. textContent mengganti teks yang terlihat. aria-live="polite" membantu mengumumkan perubahan hasil pada pembaca layar.

Pahami urutan eksekusi

Script di atas diletakkan setelah tombol dan output, sehingga elemen sudah ada ketika dicari. Jika script dipindahkan ke head, gunakan atribut defer pada berkas script eksternal atau tunggu hingga dokumen siap. Kalau tidak, querySelector bisa menghasilkan null.

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

Ubah kelas, bukan seluruh gaya inline

Untuk perubahan visual yang lebih besar, beri atau hapus kelas CSS:

const panel = document.querySelector("#panel");
const sakelar = document.querySelector("#sakelar");

sakelar.addEventListener("click", () => {
  const terbuka = panel.classList.toggle("terbuka");
  sakelar.setAttribute("aria-expanded", String(terbuka));
});

Dengan begitu, JavaScript menentukan kapan keadaan berubah, sedangkan CSS menentukan bagaimana tampilannya. Saat membuat menu, pastikan status aria-expanded sesuai dengan keadaan panel.

Kesalahan yang sering muncul

• Selector tidak cocok dengan id atau kelas di HTML. Periksa hasil querySelector di Console.
• Menggunakan innerHTML untuk teks pengguna. Untuk teks biasa, pilih textContent agar input tidak diinterpretasikan sebagai HTML.
• Memasang listener berulang kali. Jika fungsi inisialisasi dijalankan beberapa kali, satu klik dapat memicu beberapa handler.

Coba tambah tombol “Kurangi” dan batasi nilai minimum menjadi nol. Setelah itu, lanjutkan ke kursus JavaScript untuk mempelajari logika dan interaksi secara berurutan.