Merespons klik dan ketikan

Di pelajaran 6, kodenya jalan sekali, begitu halaman terbuka. Padahal kita ingin halaman yang menunggu: baru bereaksi saat pengunjung klik tombol. Kejadian seperti klik, ketikan, atau pergeseran layar disebut eventEventKejadian di halaman web, seperti klik, mengetik, atau halaman selesai dimuat.Penjelasan lengkap →.

Memasang telinga

Perintahnya addEventListener (“tambahkan pendengar”). Ia butuh dua bahan: jenis event, dan fungsi yang dijalankan saat event itu terjadi.

<button id="tombol">Klik aku</button>
<p id="kabar">Belum ada yang klik.</p>

<script>
  const tombol = document.getElementById('tombol');
  const kabar = document.getElementById('kabar');

  tombol.addEventListener('click', function () {
    kabar.textContent = 'Sudah diklik!';
  });
</script>

Dibaca: “pada tombol, dengarkan event click. Kalau terjadi, jalankan fungsi ini.” Fungsinya tidak langsung jalan; ia menunggu sampai tombol benar-benar diklik. Kamu sudah mengenal fungsi di pelajaran 4. Bedanya, kali ini fungsinya tidak diberi nama dan tidak kita panggil sendiri; browser yang memanggilnya.

Event yang paling sering dipakai:

Membaca ketikan pengunjung

Isi kotak isian ada di .value, dan selalu berupa teks, seperti di pelajaran 2:

const kotak = document.getElementById('nama');
const sapaan = document.getElementById('sapaan');

kotak.addEventListener('input', function () {
  sapaan.textContent = `Halo, ${kotak.value}!`;
});

Setiap huruf yang diketik langsung memicu event input, jadi sapaannya ikut berubah seketika. Ini yang disebut tampilan “langsung” (real-time).

Kalau yang diketik angka, jangan lupa Number(kotak.value) sebelum dihitung.

Menyimpan keadaan di variabel

Event menjalankan fungsinya berulang kali, sedangkan variabel di dalam fungsi hilang setiap selesai. Kalau ingin ingatan antar-klik, simpan di variabel di luar fungsi:

let hitungan = 0;

tombol.addEventListener('click', function () {
  hitungan = hitungan + 1;
  kabar.textContent = `Sudah diklik ${hitungan} kali`;
});

Pola ini, variabel di luar yang diubah dari dalam event, adalah dasar hampir semua aplikasi: total belanja, jumlah item di keranjang, skor permainan.

Coba sendiri

Penghitung klik. Tombol dan tulisannya sudah ada, tapi belum terhubung.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Penghitung klik</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 16px;
    }
    button {
      padding: 10px 16px;
      background: #0a66c2;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
    }
    input {
      padding: 8px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <button id="tombol">Klik aku</button>
  <p id="jumlah">Belum ada yang klik.</p>

  <input id="nama" type="text" placeholder="Ketik namamu">
  <p id="sapaan">Halo!</p>

  <script>
    const tombol = document.getElementById('tombol');
    const jumlah = document.getElementById('jumlah');
    const kotakNama = document.getElementById('nama');
    const sapaan = document.getElementById('sapaan');

    let hitungan = 0;

    // Tantangan 1: pasang addEventListener('click', ...) pada tombol
    //   - tambah 1 ke hitungan
    //   - ganti textContent jumlah jadi: Sudah diklik ... kali
    // Tantangan 3: pasang addEventListener('input', ...) pada kotakNama
    //   supaya tulisan sapaan jadi: Halo, (isi kotak)!
  </script>
</body>
</html>

Tantangannya:

1. Pasang addEventListener('click', ...) pada tombol supaya tulisan jumlah berubah setiap diklik.
2. Simpan hitungannya di variabel hitungan yang dibuat di luar fungsi.
3. Tambahkan pendengar input pada kotak nama supaya tulisan sapaan di bawahnya ikut berubah saat mengetik.