DOM & Event (Interaktif)

DOM & Event

DOM adalah cara JS "menyentuh" elemen HTML: membaca, mengubah, atau merespons aksi pengguna (event) seperti klik.

let judul = document.getElementById("judul");
judul.textContent = "Judul Baru";   // ubah isi

let tombol = document.getElementById("tombolku");
tombol.addEventListener("click", function () {
  alert("Diklik!");
});

Latihan: Counter

Gabungkan variabel, event, dan DOM. Coba tombolnya, lalu buka Show Code.

<button onclick="ubahCounter(-1)">-</button>
<div id="counterOut">0</div>
<button onclick="ubahCounter(1)">+</button>

<script>
  let angka = 0;
  function ubahCounter(langkah) {
    angka = angka + langkah;
    document.getElementById("counterOut").textContent = angka;
  }
  function resetCounter() {
    angka = 0;
    document.getElementById("counterOut").textContent = angka;
  }
</script>