Programeri uglavnom žele da njihove web stranice budu atraktivne i interaktivne. U tu svrhu na web stranicu se dodaju gumbi. Na primjer, kada postoji potreba za slanjem ili primanjem podataka, uključujući klikove za dodatne funkcije za korisnika tijekom registracije ili prijave na račun. U takvim slučajevima gumbi krajnjem korisniku omogućuju pametno izvođenje raznih funkcija.
Ovaj će blog objasniti metode za stvaranje gumba u JavaScriptu.
Kako stvoriti gumb u JavaScriptu?
Za stvaranje gumba u JavaScriptu mogu se koristiti sljedeće metode:
Sljedeći pristupi će demonstrirati koncept jedan po jedan!
Metoda 1: Stvorite gumb u JavaScriptu pomoću metoda “createElement()” i “appendChild()”
' stvoritiElement() ' metoda stvara element, a ' dodatiDijete() ” dodaje element posljednjem djetetu elementa. Ove metode će se primijeniti za kreiranje gumba i njegovo dodavanje objektnom modelu dokumenta (DOM) koji se treba upotrijebiti.
Sintaksa
dokument. createElement ( tip )element. dodatiDijete ( čvor )
U gornjoj sintaksi, ' tip ” odnosi se na vrstu elementa koji će biti kreiran pomoću metode createElement(), a „ čvor ” je čvor koji će biti pridodan uz pomoć appendChild() metode.
Sljedeći primjer će objasniti navedeni koncept.
Primjer
Prvo, ' dugme ” bit će stvoren pomoću metode document.createElement() i pohranjen u varijabli pod nazivom “ createButton ”:
konst createButton = dokument. createElement ( 'dugme' )Zatim, ' unutarnjiTekst ” svojstvo će se odnositi na kreirani gumb i postaviti tekstualnu vrijednost navedenog gumba na sljedeći način:
createButton. unutarnjiTekst = 'Click_Me'Na kraju, ' dodatiDijete() ” dodat će kreirani gumb u DOM pozivajući se na varijablu u kojoj je pohranjen kao argument:
dokument. tijelo . dodatiDijete ( createButton ) ;Izlaz gornje implementacije rezultirat će kako slijedi:
Metoda 2: Stvorite gumb u JavaScriptu koristeći atribut 'Type' oznake 'input'.
' tip ” atribut predstavlja vrstu ulaznog elementa za prikaz. Može se koristiti za stvaranje gumba navođenjem ' dugme ” kao vrijednost atributa tipa ulazne oznake.
Sintaksa
< vrsta unosa = 'dugme' >Ovdje, ' dugme ” označava vrstu polja za unos.
Pogledajte dolje navedeni primjer.
Primjer
Prvo ćemo upotrijebiti ulaznu oznaku, navesti njen tip kao ' dugme ', a vrijednost kao ' Click_Me ”. Kao rezultat, stvorit će se gumb. Nadalje, pokrenut će ' createButton() ” kada se klikne:
< vrsta unosa = vrijednost gumba = Click_Me onclick = 'createButton()' >U JavaScript datoteci definirat ćemo ' createButton() ” koja će generirati okvir s upozorenjem kada se klikne dodani gumb:
funkcija createButton ( ) {uzbuna ( 'Ovo je gumb' )
}
Izlaz
Razmotrene tehnike za stvaranje gumba u JavaScriptu mogu se prikladno koristiti prema zahtjevima.
Zaključak
Da biste stvorili gumb u JavaScriptu, ' stvoritiElement() ' i ' dodatiDijete() ” metode se mogu primijeniti za stvaranje gumba i njegovo dodavanje za korištenje u DOM-u. Još jedna tehnika koja se može koristiti za stvaranje gumba je definiranje vrste unosa i dodavanje povezane funkcije. Ovaj članak demonstrira metode za stvaranje gumba u JavaScriptu.