Pengembang sebagian besar ingin halaman web mereka menjadi menarik dan membuatnya interaktif. Untuk tujuan ini, tombol ditambahkan ke halaman web. Misalnya, ketika ada kebutuhan untuk mengirim atau menerima data, termasuk peristiwa klik untuk fungsi tambahan bagi pengguna saat mendaftar atau masuk ke akun. Dalam kasus seperti itu, tombol memungkinkan pengguna akhir untuk melakukan berbagai fungsi dengan cerdas.
Blog ini akan menjelaskan metode untuk membuat tombol dalam JavaScript.
Bagaimana Cara Membuat Tombol di JavaScript?
Untuk membuat tombol dalam JavaScript, metode berikut dapat digunakan:
Pendekatan berikut akan menunjukkan konsep satu per satu!
Metode 1: Buat Tombol di JavaScript Menggunakan Metode 'createElement()' dan 'appendChild()'
' buatElemen() ” metode membuat elemen, dan “ tambahkanAnak() ” metode menambahkan elemen ke anak terakhir dari suatu elemen. Metode ini akan diterapkan untuk membuat tombol dan menambahkannya ke Model Objek Dokumen (DOM) yang perlu digunakan, masing-masing.
Sintaksis
dokumen. buatElemen ( Tipe )elemen. tambahkanAnak ( simpul )
Dalam sintaks di atas, “ Tipe ” mengacu pada jenis elemen yang akan dibuat menggunakan metode createElement(), dan “ simpul ” adalah simpul yang akan ditambahkan dengan bantuan metode appendChild().
Contoh berikut akan menjelaskan konsep yang disebutkan.
Contoh
Pertama, sebuah “ tombol ” akan dibuat menggunakan metode document.createElement() dan disimpan dalam variabel bernama “ buatTombol ”:
konstan buatTombol = dokumen. buatElemen ( 'tombol' )Selanjutnya, “ innertext ” akan merujuk ke tombol yang dibuat dan mengatur nilai teks dari tombol yang ditentukan sebagai berikut:
buatTombol. innertext = 'Klik_Saya'Terakhir, “ tambahkanAnak() ” metode akan menambahkan tombol yang dibuat ke DOM dengan merujuk ke variabel di mana ia disimpan sebagai argumen:
dokumen. tubuh . tambahkanAnak ( buatTombol ) ;Output dari implementasi di atas akan menghasilkan sebagai berikut:
Metode 2: Buat Tombol di JavaScript Menggunakan Atribut 'Ketik' dari Tag 'input'
' Tipe Atribut ” merepresentasikan tipe elemen input yang akan ditampilkan. Itu dapat digunakan untuk membuat tombol dengan menentukan “ tombol ” sebagai nilai dari atribut type dari tag input.
Sintaksis
< tipe masukan = 'tombol' >Di Sini, ' tombol ” menunjukkan jenis kolom input.
Lihat contoh yang diberikan di bawah ini.
Contoh
Pertama, kita akan menggunakan tag input, tentukan jenisnya sebagai “ tombol ”, dan nilai sebagai “ Klik_Saya ”. Akibatnya, sebuah tombol akan dibuat. Selanjutnya akan memicu “ buatTombol() ” berfungsi saat diklik:
< tipe masukan = nilai tombol = Click_Me onclick = 'buatTombol()' >Dalam file JavaScript, kita akan mendefinisikan ' buatTombol() ” yang akan menghasilkan kotak peringatan ketika tombol yang ditambahkan akan diklik:
fungsi buatTombol ( ) {peringatan ( 'Ini adalah tombol' )
}
Keluaran
Teknik yang dibahas untuk membuat tombol dalam JavaScript dapat digunakan sesuai dengan kebutuhan.
Kesimpulan
Untuk membuat tombol di JavaScript, “ buatElemen() ' dan ' tambahkanAnak() ” dapat diterapkan untuk membuat tombol dan menambahkannya untuk digunakan di DOM. Teknik lain yang dapat digunakan untuk membuat tombol adalah mendefinisikan tipe input dan menambahkan fungsionalitas terkait. Artikel ini menunjukkan metode untuk membuat tombol di JavaScript.