Razvijalci večinoma želijo, da so njihove spletne strani privlačne in interaktivne. V ta namen so na spletno stran dodani gumbi. Na primer, ko je treba poslati ali prejeti podatke, vključno z dogodki klikanja za dodane funkcije za uporabnika med registracijo ali prijavo v račun. V takšnih primerih gumbi omogočajo končnemu uporabniku pametno izvajanje različnih funkcij.
Ta blog bo razložil metode za ustvarjanje gumbov v JavaScriptu.
Kako ustvariti gumb v JavaScriptu?
Če želite ustvariti gumb v JavaScriptu, lahko uporabite naslednje metode:
Naslednji pristopi bodo prikazali koncept enega za drugim!
1. način: ustvarite gumb v JavaScriptu z uporabo metod “createElement()” in “appendChild()”
' createElement() ' ustvari element, metoda ' appendChild() ” doda element zadnjemu podrejenemu elementu. Te metode bodo uporabljene za ustvarjanje gumba in njegovo dodajanje modelu objektov dokumenta (DOM), ki ga je treba uporabiti.
Sintaksa
dokument. createElement ( vrsta )element. appendChild ( vozlišče )
V zgornji sintaksi ' vrsta « se nanaša na vrsto elementa, ki bo ustvarjen z metodo createElement(), in » vozlišče ” je vozlišče, ki bo dodano s pomočjo metode appendChild().
Naslednji primer bo pojasnil navedeni koncept.
Primer
Prvič, ' gumb « bo ustvarjen z uporabo metode document.createElement() in shranjen v spremenljivki z imenom » createButton ”:
konst createButton = dokument. createElement ( 'gumb' )Nato je ' innerText ” se bo sklicevala na ustvarjeni gumb in nastavila besedilno vrednost podanega gumba, kot sledi:
createButton. innerText = 'Click_Me'Nazadnje, ' appendChild() ” bo dodala ustvarjeni gumb v DOM s sklicevanjem na spremenljivko, v kateri je shranjen kot argument:
dokument. telo . appendChild ( createButton ) ;Rezultat zgornje izvedbe bo naslednji:
2. način: Ustvarite gumb v JavaScriptu z uporabo atributa »Type« oznake »input«.
' vrsta ” atribut predstavlja vrsto vhodnega elementa za prikaz. Uporabite ga lahko za ustvarjanje gumba tako, da podate » gumb ” kot vrednost atributa tipa vhodne oznake.
Sintaksa
< vrsta vnosa = 'gumb' >Tukaj, ' gumb ” označuje vrsto vnosnega polja.
Oglejte si spodnji primer.
Primer
Najprej bomo uporabili vhodno oznako, njeno vrsto določimo kot ' gumb «, in vrednost kot » Click_Me ”. Kot rezultat bo ustvarjen gumb. Poleg tega bo sprožil ' createButton() ” ob kliku:
< vrsta vnosa = vrednost gumba = Click_Me onclick = 'createButton()' >V datoteki JavaScript bomo definirali » createButton() « funkcija, ki bo ustvarila opozorilno polje, ko boste kliknili dodani gumb:
funkcijo createButton ( ) {opozorilo ( 'To je gumb' )
}
Izhod
Obravnavane tehnike za ustvarjanje gumba v JavaScriptu je mogoče ustrezno uporabiti glede na zahteve.
Zaključek
Če želite ustvariti gumb v JavaScriptu, ' createElement() « in » appendChild() ” lahko uporabite metode za ustvarjanje gumba in njegovo dodajanje za uporabo v DOM. Druga tehnika, ki jo je mogoče uporabiti za ustvarjanje gumba, je definiranje vrste vnosa in dodajanje povezane funkcije. Ta članek je prikazal metode za ustvarjanje gumba v JavaScriptu.