Karamihan sa mga developer ay nais na maging kaakit-akit ang kanilang mga web page at gawin silang interactive. Para sa layuning ito, ang mga pindutan ay idinagdag sa web page. Halimbawa, kapag may pangangailangang magpadala o tumanggap ng data, kabilang ang mga kaganapan sa pag-click para sa mga karagdagang functionality para sa user habang nagrerehistro o nagsa-sign in sa isang account. Sa ganitong mga kaso, pinapayagan ng mga pindutan ang end-user na magsagawa ng iba't ibang mga pag-andar nang matalino.
Ipapaliwanag ng blog na ito ang mga paraan upang lumikha ng mga button sa JavaScript.
Paano Gumawa ng Button sa JavaScript?
Upang lumikha ng pindutan sa JavaScript, ang mga sumusunod na pamamaraan ay maaaring gamitin:
Ang mga sumusunod na diskarte ay isa-isang magpapakita ng konsepto!
Paraan 1: Lumikha ng Button sa JavaScript Gamit ang 'createElement()' at 'appendChild()' na Paraan
Ang ' createElement() Ang paraan ng ” ay lumilikha ng isang elemento, at ang “ appendChild() Ang paraan ng ” ay nagdaragdag ng isang elemento sa huling anak ng isang elemento. Ilalapat ang mga pamamaraang ito para sa paglikha ng isang button at pagdaragdag nito sa Document Object Model(DOM) na kailangang gamitin, ayon sa pagkakabanggit.
Syntax
dokumento. createElement ( uri )elemento. idagdagBata ( node )
Sa syntax sa itaas, ' uri ' ay tumutukoy sa uri ng elemento na gagawin gamit ang createElement() na paraan, at ' node ” ay ang node na idaragdag sa tulong ng paraan ng appendChild().
Ang sumusunod na halimbawa ay magpapaliwanag sa nakasaad na konsepto.
Halimbawa
Una, isang ' pindutan Ang ” ay gagawin gamit ang document.createElement() na pamamaraan at iimbak sa isang variable na pinangalanang “ createButton ”:
const createButton = dokumento. createElement ( 'button' )Susunod, ang ' innerText Ang ” property ay tumutukoy sa ginawang button at itatakda ang text value ng tinukoy na button bilang sumusunod:
createButton. innerText = 'Pindutin mo ako'Panghuli, ang ' appendChild() ” paraan ay idaragdag ang nilikha na button sa DOM sa pamamagitan ng pagtukoy sa variable kung saan ito nakaimbak bilang isang argumento:
dokumento. katawan . idagdagBata ( createButton ) ;Ang output ng pagpapatupad sa itaas ay magreresulta tulad ng sumusunod:
Paraan 2: Gumawa ng Button sa JavaScript Gamit ang 'Uri' Attribute ng 'input' na Tag
Ang ' uri Ang katangian ng ” ay kumakatawan sa uri ng elemento ng pag-input na ipapakita. Maaari itong magamit upang lumikha ng isang pindutan sa pamamagitan ng pagtukoy ng ' pindutan ” bilang ang halaga ng uri ng katangian ng input tag.
Syntax
< uri ng input = 'button' >Dito,' pindutan ” ay nagpapahiwatig ng uri ng input field.
Tingnan ang ibinigay na halimbawa sa ibaba.
Halimbawa
Una, gagamit kami ng input tag, tukuyin ang uri nito bilang ' pindutan ”, at halaga bilang “ Pindutin mo ako ”. Bilang resulta, ang isang pindutan ay malilikha. Higit pa rito, ito ay magpapalitaw ng ' createButton() ” function kapag na-click:
< uri ng input = halaga ng pindutan = Click_Me onclick = 'createButton()' >Sa JavaScript file, tutukuyin namin ang ' createButton() ” function na bubuo ng alert box kapag na-click ang idinagdag na button:
function createButton ( ) {alerto ( 'Ito ay isang pindutan' )
}
Output
Ang tinalakay na mga diskarte upang lumikha ng isang pindutan sa JavaScript ay maaaring magamit nang naaangkop ayon sa mga kinakailangan.
Konklusyon
Para gumawa ng button sa JavaScript, “ createElement() 'at' appendChild() Ang mga pamamaraan ay maaaring ilapat para sa paglikha ng isang pindutan at pagdaragdag nito upang magamit sa DOM. Ang isa pang pamamaraan na maaaring magamit upang lumikha ng isang pindutan ay ang pagtukoy ng isang uri ng input at pagdaragdag ng nauugnay na pag-andar. Ipinakita ng artikulong ito ang mga paraan upang lumikha ng isang button sa JavaScript.