Event OnClick

Sampai di bab sebelumnya, kita sudah belajar cara mengambil elemen, mengubah teksnya, bahkan memodifikasi banyak elemen sekaligus. Tapi semuanya masih diam—belum merespons interaksi dari user.

Nah, web modern itu tidak cuma menampilkan informasi. Web modern bereaksi. Ketika tombol diklik → muncul pesan. Ketika gambar disentuh → berubah warna. Ketika teks diisi → muncul peringatan otomatis.

Untuk membuat halaman web yang hidup dan interaktif, JavaScript menyediakan sesuatu yang disebut event.

Dan event paling dasar—sekaligus paling sering dipakai—adalah:

onclick (kode yang berjalan ketika sebuah elemen diklik)

Di materi ini, kita akan belajar:

• Apa itu event

• Cara kerja event onclick

• Bagaimana memasang event pada tombol

• Bagaimana onclick memanggil fungsi

• Bagaimana onclick mengubah isi elemen lain

• Alur logis dari klik → eksekusi kode → perubahan elemen

• Contoh kasus nyata

Tujuan materi bab ini: Agar kita bisa membuat interaksi langsung pada halaman web hanya dengan klik.

---

A. Apa itu Event?

Event adalah “kejadian” di halaman web. Contoh event:

• klik

• mouse masuk

• scroll

• ketik huruf

• halaman selesai dimuat

• focus pada input

Dalam analogi dunia nyata:

Event = pemicu JavaScript = reaksinya

Misalnya:

• Ketika pintu dibuka → alarm berbunyi

• Ketika lampu ditekan → lampu menyala

• Ketika tombol elevator ditekan → elevator bergerak

• Ketika tombol power ditekan → komputer hidup

Dalam web:

• Ketika tombol diklik → JavaScript menjalankan kode

---

B. Apa itu onclick?

onclick adalah event sederhana yang berjalan ketika elemen diklik.

Format dasar:

<button onclick="alert('Hello')">Klik</button>

Yang terjadi:

1. User mengklik tombol

2. JavaScript melihat ada atribut onclick

3. Kode di dalam atribut dijalankan

4. Muncul alert “Hello”

---

C. Analogi Dunia Nyata untuk onclick

Bayangkan kita punya saklar lampu.

• Saklar = tombol

• Tangan kita = event klik

• Lampu menyala = JavaScript menjalankan kode

Saat tangan menekan saklar, sesuatu terjadi. Begitu juga dengan onclick: ketika elemen di-klik, JavaScript “menyala” dan melakukan sesuatu.

---

D. Onclick Mengubah Isi Elemen

Misalnya kita punya HTML berikut:

<p id="txt">Halo</p>

<button onclick="document.getElementById('txt').innerText = 'Hi';">
    Ganti
</button>

Ketika tombol diklik:

• JavaScript mencari elemen dengan ID "txt"

• lalu mengganti innerText-nya menjadi "Hi"

Hasilnya: teks "Halo" berubah menjadi "Hi".

---

E. Onclick Memanggil Fungsi

Penulisan onclick yang baik biasanya memanggil fungsi.

HTML:

<button onclick="ubahTeks()">Klik</button>

JavaScript:

function ubahTeks() {
    document.getElementById("judul").innerText = "Teks baru!";
}

Alurnya:

1. Tombol diklik

2. onclick memanggil fungsi ubahTeks()

3. Fungsi mencari elemen "judul"

4. Fungsi mengganti teksnya

5. Halaman berubah

---

F. Contoh Kasus Nyata

1) Tombol tambah angka

HTML:

<div id="counter">10</div>
<button onclick="document.getElementById('counter').innerText++">
    Tambah
</button>

Ketika tombol diklik:

• angka 10 → 11

• lalu → 12

• lalu → 13

Ini mirip fitur counter pada aplikasi kasir, stok barang, rating, dll.

---

2) Tombol menyembunyikan teks

<p id="info">Ini teks rahasia</p>
<button onclick="document.getElementById('info').innerText = ''">Hapus</button>

---

3) Menyalakan/Mematikan mode gelap

function dark() {
    document.body.style.backgroundColor = "black";
    document.body.style.color = "white";
}

<button onclick="dark()">Mode Gelap</button>

---

4) Mengubah warna semua elemen tertentu

<button onclick="ubahWarna()">Ubah Warna</button>

<p class="item">A</p>
<p class="item">B</p>
<p class="item">C</p>

function ubahWarna() {
    let items = document.getElementsByClassName("item");

    for (let i = 0; i < items.length; i++) {
        items[i].style.color = "blue";
    }
}

Klik satu tombol, tiga paragraf berubah warna. Simple, tapi powerful.

---

G. Alur Logis Onclick (dari klik hingga berubahnya elemen)

1. User melakukan klik pada elemen

2. Browser mendeteksi bahwa elemen tersebut memiliki atribut onclick

3. Browser menjalankan JavaScript yang ada dalam onclick

4. JavaScript membaca/mengubah elemen lain

5. Browser memperbarui tampilan halaman

6. User melihat perubahan secara langsung (real-time)

Ini adalah dasar dari hampir semua interaksi web modern.

---

Kesimpulan

Di Bab 5 ini, kita sudah belajar hal penting tentang interaksi web:

• Event adalah kejadian di dalam halaman

• onclick adalah event untuk menangani klik

• onclick dapat menjalankan kode langsung atau memanggil fungsi

• Klik bisa mengubah teks, warna, gaya, angka, dan elemen lain

• onclick + DOM = website yang hidup dan interaktif

Sekarang mari kita refleksikan:

Jika kita bisa membuat halaman bereaksi saat diklik, interaksi apa yang ingin kita buat untuk latihan?

Beberapa ide:

• tombol “Tambah” yang menaikkan angka

• tombol “Ganti warna” untuk mengganti tema

• tombol “Sembunyikan teks”

• tombol “Lihat password”

• tombol “Hitung total belanja”

Cobalah tulis satu ide kecil yang ingin kita buat dengan onclick.

Karena di Bab 6 nanti, kita akan menyatukan semua kemampuan yang sudah kita pelajari — variabel + operator + DOM + onclick — dalam sebuah:

🎯 Mini Project DOM Di mana satu tombol bisa mengubah seluruh elemen <p> dengan class tertentu menjadi biru.