Ada yang menyebutnya sihir - kemampuan untuk membuat objek muncul tiba-tiba entah dari mana. Anda dapat membuat keajaiban semacam ini di situs web Anda menggunakan beberapa baris JavaScript. Kotak teks, misalnya, adalah elemen HTML yang baik untuk digunakan saat belajar membuat objek muncul secara dinamis. Alih-alih membangunnya ke dalam kode Anda saat Anda mendesain halaman Web Anda, tambahkan kotak teks sesuai kebutuhan dan pada saat yang sama mengesankan pengunjung situs.
Pembuatan Kotak Teks
Sebelum membuat kotak teks terwujud, Anda harus memahami apa itu kotak teks. HTML mengetahuinya sebagai tag input seperti yang ditunjukkan pada contoh berikut:
Tag masukan ini membuat kotak teks yang memiliki dua atribut penting; id dan tipe. Atribut type, yang nilainya adalah "teks", memberi tahu browser untuk membuat kotak teks alih-alih jenis kontrol lain seperti tombol. Atribut id, yang bersifat opsional, bisa berguna jika Anda perlu memanipulasi kotak teks nanti. Opsi nilai, yang juga opsional, berisi nilai yang ingin Anda lihat di kotak teks saat halaman Web terbuka.
Kotak Teks Dinamis
HTML tidak peduli ketika Anda mendefinisikan atribut elemen selama Anda memberinya nilai di suatu tempat. Ini berarti Anda memiliki kemampuan untuk membuat elemen kotak teks secara dinamis dan menyetel atributnya kapan saja Anda suka. Fungsi document.createElement memungkinkan hal ini seperti yang ditunjukkan di bawah ini:
var box = document.createElement ("input");
Hanya itu yang diperlukan untuk membuat elemen input HTML dan menetapkannya ke variabel bernama "box". Objek kotak tidak menjadi kotak teks sampai Anda memberikan atribut type-nya nilai "teks" seperti yang ditunjukkan dalam contoh ini:
box.type = "text";
Integrasi Halaman Web
Kode di bawah ini menambahkan kotak teks ke dokumen HTML. Menggunakan fungsi appendChild yang berguna:
document.body.appendChild (kotak);
Jika Anda ingin menambahkan kotak teks setelah kontrol tertentu, gunakan pernyataan berikut sebagai gantinya:
document.getElementById ("some_Element_ID"). appendChild (kotak);
Ganti "some_Element_ID" dengan nama elemen yang setelah itu Anda ingin menambahkan kotak teks. Misalnya, Jika elemen itu adalah tombol yang ID-nya adalah "button1", pernyataan appendChild akan muncul sebagai berikut:
document.getElementById ("tombol1"). appendChild (kotak);
Atribut Opsional
Kotak teks baru Anda akan bekerja dengan sempurna menggunakan kode ini. Cukup buat fungsi JavaScript yang berisi pernyataan dan panggil setiap kali Anda membutuhkan kotak teks. Namun, Anda juga dapat menyetel nilai kotak teks dan atribut ID sebagai berikut:
box.value = boxValue; box.id = boxID;
Meneruskan nilai boxValue dan boxID ke fungsi tersebut, dan ini menerapkan atribut tersebut ke kotak teks. Jika Anda menetapkan nilai ID, Anda dapat menggunakannya nanti untuk memperbarui properti kotak teks seperti yang ditunjukkan pada contoh di bawah ini:
var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "merah";
Pernyataan pertama memperoleh referensi ke kotak teks dan pernyataan terakhir mengubah warna latar belakang kotak teks menjadi merah.