A fejlesztők leginkább azt szeretnék, hogy weboldalaik vonzóak legyenek, és interaktívak legyenek. Ebből a célból gombok kerülnek a weboldalra. Például, ha adatok küldésére vagy fogadására van szükség, beleértve a kattintási eseményeket a felhasználói fiók regisztrációja vagy bejelentkezése közbeni hozzáadott funkciókhoz. Ilyen esetekben a gombok segítségével a végfelhasználó okosan hajthat végre különféle funkciókat.
Ez a blog elmagyarázza a gombok létrehozásának módszereit JavaScriptben.
Hogyan hozzunk létre gombot JavaScriptben?
Gomb létrehozásához JavaScriptben a következő módszerek használhatók:
A következő megközelítések egyenként mutatják be a koncepciót!
1. módszer: Gomb létrehozása JavaScriptben a „createElement()” és „appendChild()” metódusok használatával
Az ' createElement() ” metódus létrehoz egy elemet, és a „ appendChild() ” metódus hozzáfűz egy elemet az elem utolsó gyermekéhez. Ezeket a módszereket a rendszer egy gomb létrehozására és a használni kívánt dokumentumobjektum-modellhez (DOM) történő hozzáfűzésére alkalmazza.
Szintaxis
dokumentum. CreateElement ( típus )elem. appendChild ( csomópont )
A fenti szintaxisban: ' típus ' a createElement() metódussal létrehozandó elem típusára utal, és a ' csomópont ” az a csomópont, amely az appendChild() metódus segítségével lesz hozzáfűzve.
A következő példa elmagyarázza a megfogalmazott fogalmat.
Példa
Először is egy „ gomb ” a document.createElement() metódussal jön létre, és egy „ nevű változóban tárolódik CreateButton ”:
const CreateButton = dokumentum. CreateElement ( 'gomb' )Ezután a „ innerText ” tulajdonság a létrehozott gombra fog hivatkozni, és beállítja a megadott gomb szöveges értékét az alábbiak szerint:
CreateButton. innerText = 'Kattints ide'Végül a „ appendChild() ” metódus hozzáfűzi a létrehozott gombot a DOM-hoz, hivatkozva arra a változóra, amelyben argumentumként tárolva van:
dokumentum. test . appendChild ( CreateButton ) ;A fenti megvalósítás eredménye a következő lesz:
2. módszer: Hozzon létre gombot a JavaScriptben az „input” címke „Type” attribútuma használatával
Az ' típus ” attribútum a megjelenítendő bemeneti elem típusát jelöli. Használható gomb létrehozására a „ gomb ” a bemeneti címke type attribútumának értékeként.
Szintaxis
< bemeneti típus = 'gomb' >Itt, ' gomb ” a beviteli mező típusát jelzi.
Tekintse meg az alábbi példát.
Példa
Először egy beviteli címkét fogunk használni, a típusát a következőképpen adja meg: gomb ”, értéke pedig „ Kattints ide ”. Ennek eredményeként egy gomb jön létre. Ezenkívül kiváltja a „ CreateButton() ” funkcióra kattintva:
< bemeneti típus = gomb értéke = Click_Me onclick = 'createButton()' >A JavaScript fájlban meghatározzuk a ' CreateButton() ” funkció, amely figyelmeztető mezőt generál, ha a hozzáadott gombra kattintanak:
funkció CreateButton ( ) {éber ( 'Ez egy gomb' )
}
Kimenet
A tárgyalt technikák a JavaScript-ben gomb létrehozására az igényeknek megfelelően megfelelően használhatók.
Következtetés
Gomb létrehozásához JavaScriptben: createElement() ” és „ appendChild() ” metódusokat lehet alkalmazni egy gomb létrehozására és hozzáfűzésére, hogy a DOM-ban használható legyen. Egy másik technika, amely gomb létrehozására használható, a beviteli típus meghatározása és a kapcsolódó funkciók hozzáadása. Ez a cikk bemutatja a gombok JavaScriptben való létrehozásának módszereit.