Tombol kirim sudah diklik, tetapi pengguna belum tahu apakah namanya berhasil diproses. Di tutorial pemula ini, kita akan membuat form kecil yang memeriksa kolom nama lalu menampilkan pesan di halaman. Siapkan satu file HTML dan JavaScript dasar; contoh ini tidak memerlukan pustaka tambahan.
Siapkan elemen form
Buat elemen form dengan id signupForm, sebuah input dengan id nameInput, tombol bertuliskan Kirim, dan paragraf kosong dengan id feedback. Contoh input-nya: <input id="nameInput" type="text">. Paragraf feedback menjadi tempat pesan hasil pemeriksaan ditampilkan.
Pastikan file JavaScript dimuat setelah elemen-elemen tersebut, misalnya dengan menaruh <script src="script.js"></script> tepat sebelum tag penutup body. Dengan urutan ini, JavaScript dapat menemukan elemen yang sudah dibuat browser. Kalau script dijalankan lebih dulu, hasil querySelector bisa null karena elemen form belum tersedia.
Tangani pengiriman form
Di script.js, ambil elemen form, input, dan pesan menggunakan document.querySelector, lalu pasang pendengar submit pada form. Di dalam fungsi submit, panggil event.preventDefault() agar browser tidak memuat ulang halaman. Ambil isi kolom dengan nameInput.value.trim(); trim menghapus spasi di awal dan akhir, sehingga kolom berisi spasi saja dianggap kosong.
Gunakan kondisi if (!name) untuk memeriksa hasilnya. Jika kosong, isi feedback.textContent dengan "Nama belum diisi."; jika tidak, tampilkan "Halo, " ditambah nama dan tanda seru. textContent menampilkan isi sebagai teks biasa, jadi cocok untuk pesan ini tanpa memperlakukan masukan pengguna sebagai HTML.
Periksa hasil di browser
Simpan kedua file, buka HTML di browser, lalu klik Kirim saat kolom kosong. Pesan "Nama belum diisi." seharusnya muncul tanpa halaman berpindah; setelah nama diketik, pesan sapaan akan menggantikannya. Jika tombol tidak bereaksi, periksa nama id pada HTML dan JavaScript serta lihat Console untuk pesan error seperti elemen yang bernilai null.