Kebanyakan pembangun mahu laman web mereka menarik dan menjadikannya interaktif. Untuk tujuan ini, butang ditambahkan pada halaman web. Contohnya, apabila terdapat keperluan untuk menghantar atau menerima data, termasuk acara klik untuk fungsi tambahan untuk pengguna semasa mendaftar atau melog masuk ke akaun. Dalam kes sedemikian, butang membolehkan pengguna akhir melaksanakan pelbagai fungsi dengan bijak.
Blog ini akan menerangkan kaedah untuk membuat butang dalam JavaScript.
Bagaimana untuk Membuat Butang dalam JavaScript?
Untuk membuat butang dalam JavaScript, kaedah berikut boleh digunakan:
Pendekatan berikut akan menunjukkan konsep satu demi satu!
Kaedah 1: Buat Butang dalam JavaScript Menggunakan Kaedah 'createElement()' dan 'appendChild()'
' createElement() ' kaedah mencipta elemen, dan ' appendChild() ” kaedah menambahkan elemen kepada anak terakhir elemen. Kaedah ini akan digunakan untuk mencipta butang dan menambahkannya pada Model Objek Dokumen (DOM) yang perlu digunakan, masing-masing.
Sintaks
dokumen. createElement ( menaip )unsur. appendChild ( nod )
Dalam sintaks di atas, ' menaip ' merujuk kepada jenis elemen yang akan dibuat menggunakan kaedah createElement() dan ' nod ” ialah nod yang akan ditambah dengan bantuan kaedah appendChild().
Contoh berikut akan menerangkan konsep yang dinyatakan.
Contoh
Pertama, ' butang ” akan dibuat menggunakan kaedah document.createElement() dan disimpan dalam pembolehubah bernama “ createButton ”:
const createButton = dokumen. createElement ( 'butang' )Seterusnya, ' innerTeks ” harta akan merujuk kepada butang yang dibuat dan menetapkan nilai teks butang yang ditentukan seperti berikut:
createButton. innerTeks = 'Klik_Saya'Akhir sekali, ' appendChild() ” kaedah akan menambahkan butang yang dibuat pada DOM dengan merujuk kepada pembolehubah di mana ia disimpan sebagai hujah:
dokumen. badan . appendChild ( createButton ) ;Output pelaksanaan di atas akan terhasil seperti berikut:
Kaedah 2: Buat Butang dalam JavaScript Menggunakan Atribut 'Jenis' Teg 'input'.
' menaip ” atribut mewakili jenis elemen input untuk dipaparkan. Ia boleh digunakan untuk mencipta butang dengan menyatakan “ butang ” sebagai nilai atribut jenis teg input.
Sintaks
< jenis input = 'butang' >Di sini, ' butang ” menunjukkan jenis medan input.
Lihat contoh yang diberikan di bawah.
Contoh
Pertama, kami akan menggunakan teg input, tentukan jenisnya sebagai ' butang ”, dan nilai sebagai “ Klik_Saya ”. Akibatnya, butang akan dibuat. Tambahan pula, ia akan mencetuskan ' createButton() fungsi ” apabila diklik:
< jenis input = nilai butang = Click_Me onclick = 'createButton()' >Dalam fail JavaScript, kami akan mentakrifkan ' createButton() ” yang akan menjana kotak amaran apabila butang tambahan akan diklik:
fungsi createButton ( ) {amaran ( 'Ini adalah butang' )
}
Pengeluaran
Teknik yang dibincangkan untuk mencipta butang dalam JavaScript boleh digunakan dengan sesuai mengikut keperluan.
Kesimpulan
Untuk membuat butang dalam JavaScript, “ createElement() ” dan “ appendChild() ” kaedah boleh digunakan untuk mencipta butang dan menambahkannya untuk digunakan dalam DOM. Teknik lain yang boleh digunakan untuk mencipta butang ialah mentakrifkan jenis input dan menambah fungsi yang berkaitan. Artikel ini menunjukkan kaedah untuk mencipta butang dalam JavaScript.