FluentStack

Event Click dan Input

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 4: JavaScript FundamentalsBeginner40 menitBahasa Indonesia

Event Click dan Input

Belajar merespons klik user dan membaca value input untuk mengubah teks halaman.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami event sebagai aksi user yang bisa direspons JavaScript
  • Memakai addEventListener untuk click event
  • Membaca value dari input sederhana
JavaScriptEventsInput

Isi lesson

6 blok
  1. 1.
    Event membuat halaman terasa hidupBelum selesaiWajib
  2. 2.
    addEventListener mendengarkan actionBelum selesaiWajib
  3. 3.
    Tombol yang membaca inputBelum selesaiWajib
  4. 4.
    Bedakan memilih elemen dan membaca valueBelum selesaiWajib
  5. 5.
    Coding practiceBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Event membuat halaman terasa hidup

Wajib

DOM selection bisa mengubah halaman, tetapi halaman interaktif biasanya menunggu action dari user. Action seperti klik tombol, mengetik di input, atau submit form disebut event. JavaScript bisa mendengarkan event lalu menjalankan function.

Bagian ini memengaruhi progres lesson.

addEventListener mendengarkan action

Wajib

Pola event dasar adalah memilih elemen, lalu memasang addEventListener. Untuk tombol, event yang sering dipakai adalah click. Di dalam function event, kamu bisa membaca input.value dan menampilkan hasilnya ke elemen lain.

Bagian ini memengaruhi progres lesson.

Tombol yang membaca input

Wajib
js
const nameInput = document.querySelector("#nameInput");
const greetingButton = document.querySelector("#greetingButton");
const greetingText = document.querySelector("#greetingText");

greetingButton.addEventListener("click", () => {
  greetingText.textContent = "Halo, " + nameInput.value;
});

Saat tombol diklik, JavaScript membaca value dari input lalu mengganti teks greetingText. Function di dalam addEventListener baru berjalan setelah event click terjadi.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Bedakan memilih elemen dan membaca value

nameInput adalah elemen inputnya. nameInput.value adalah teks yang sedang diketik user. Kalau kamu butuh isi input, ambil property value, bukan elemen inputnya saja.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Membuat greeting dari input

Latihan merespons klik tombol dan membaca value input.

Tujuan awal: Fokus di tab JS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis3 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Event adalah action yang terjadi di halaman, misalnya click.
  • addEventListener memasang function yang berjalan saat event terjadi.
  • input.value membaca teks yang diketik user.
  • Berikutnya, kamu akan memakai pola event untuk form submit.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Event membuat halaman terasa hidup.

Memuat progresReview module