Kehittäjät haluavat useimmiten verkkosivujensa olevan houkuttelevia ja tehdä niistä interaktiivisia. Tätä tarkoitusta varten verkkosivulle on lisätty painikkeita. Esimerkiksi silloin, kun on tarpeen lähettää tai vastaanottaa tietoja, mukaan lukien napsautustapahtumat lisätoimintoja varten käyttäjälle rekisteröityessään tai kirjautuessaan tilille. Tällaisissa tapauksissa painikkeiden avulla loppukäyttäjä voi suorittaa erilaisia toimintoja älykkäästi.
Tämä blogi selittää tapoja luoda painikkeita JavaScriptissä.
Kuinka luoda painike JavaScriptissä?
Voit luoda painikkeen JavaScriptissä seuraavilla tavoilla:
Seuraavat lähestymistavat osoittavat konseptin yksitellen!
Tapa 1: Luo painike JavaScriptissä käyttämällä 'createElement()'- ja 'appendChild()' -menetelmiä
' createElement() ' -menetelmä luo elementin ja ' appendChild() ” -menetelmä lisää elementin elementin viimeiseen jälkeläiseen. Näitä menetelmiä käytetään painikkeen luomiseen ja sen liittämiseen käytettävään Document Object Model (DOM) -malliin.
Syntaksi
asiakirja. CreateElement ( tyyppi )elementti. liitä lapsi ( solmu )
Yllä olevassa syntaksissa ' tyyppi ' viittaa elementin tyyppiin, joka luodaan käyttämällä createElement()-menetelmää, ja ' solmu ” on solmu, joka liitetään appendChild()-metodin avulla.
Seuraava esimerkki selittää esitetyn käsitteen.
Esimerkki
Ensinnäkin ' -painiketta ' luodaan käyttämällä document.createElement() -menetelmää ja tallennetaan muuttujaan nimeltä ' luo Button ':
konst luo Button = asiakirja. CreateElement ( 'painike' )Seuraavaksi ' sisäteksti ”-ominaisuus viittaa luotuun painikkeeseen ja asettaa määritetyn painikkeen tekstiarvon seuraavasti:
luo Button. sisäteksti = 'Click_Me'Lopuksi ' appendChild() ” -menetelmä lisää luodun painikkeen DOM:iin viittaamalla muuttujaan, johon se on tallennettu argumenttina:
asiakirja. kehon . liitä lapsi ( luo Button ) ;Yllä olevan toteutuksen tulos on seuraava:
Tapa 2: Luo painike JavaScriptissä käyttämällä 'input' -tunnisteen 'tyyppi'-attribuuttia
' tyyppi ”-attribuutti edustaa näytettävän syöttöelementin tyyppiä. Sitä voidaan käyttää painikkeen luomiseen määrittämällä ' -painiketta ' syötetunnisteen type-attribuutin arvona.
Syntaksi
< syötteen tyyppi = 'painike' >Täällä, ' -painiketta ” osoittaa syöttökentän tyypin.
Katso alla oleva esimerkki.
Esimerkki
Ensinnäkin käytämme syöttötunnistetta, määritä sen tyyppi ' -painiketta ja arvo muodossa ' Click_Me ”. Tämän seurauksena painike luodaan. Lisäksi se laukaisee ' luoButton() ”-toiminto, kun sitä napsautetaan:
< syötteen tyyppi = painikkeen arvo = Click_Me onclick = 'luoButton()' >JavaScript-tiedostossa määritämme ' luoButton() ”-toiminto, joka luo hälytysruudun, kun lisättyä painiketta napsautetaan:
toiminto luo Button ( ) {hälytys ( 'Tämä on painike' )
}
Lähtö
Käsiteltyjä tekniikoita painikkeen luomiseksi JavaScriptiin voidaan hyödyntää sopivasti tarpeiden mukaan.
Johtopäätös
Jos haluat luoda painikkeen JavaScriptissä, ' createElement() ' ja ' appendChild() ” -menetelmiä voidaan soveltaa painikkeen luomiseen ja liittämiseen käytettäväksi DOM:ssa. Toinen painike, jota voidaan käyttää painikkeen luomiseen, on syöttötyypin määrittäminen ja siihen liittyvien toimintojen lisääminen. Tässä artikkelissa esiteltiin tapoja luoda painike JavaScriptissä.