Arendajad soovivad enamasti, et nende veebilehed oleksid atraktiivsed ja muudaksid need interaktiivseks. Selleks lisatakse veebilehele nupud. Näiteks kui on vaja saata või vastu võtta andmeid, sealhulgas klõpsamissündmusi, et kasutaja saaks kontole registreerimisel või kontole sisse logimisel lisafunktsioone. Sellistel juhtudel võimaldavad nupud lõppkasutajal erinevaid funktsioone nutikalt täita.
See ajaveeb selgitab JavaScriptis nuppude loomise meetodeid.
Kuidas JavaScriptis nuppu luua?
Nupu loomiseks JavaScriptis saab kasutada järgmisi meetodeid:
Järgmised lähenemisviisid demonstreerivad kontseptsiooni ükshaaval!
1. meetod: looge nupp JavaScriptis, kasutades meetodeid 'createElement()' ja 'appendChild()'
' looElement() ' meetod loob elemendi ja ' appendChild() ” meetod lisab elemendi elemendi viimasele alamastmele. Neid meetodeid rakendatakse nupu loomiseks ja selle lisamiseks kasutatavale dokumendiobjekti mudelile (DOM).
Süntaks
dokument. looElement ( tüüp )element. lisalaps ( sõlm )
Ülaltoodud süntaksis ' tüüp ' viitab elemendi tüübile, mis luuakse meetodiga createElement() ja ' sõlm ” on sõlm, mis lisatakse meetodi appendChild() abil.
Järgmine näide selgitab esitatud kontseptsiooni.
Näide
Esiteks, ' nuppu ' luuakse meetodi document.createElement() abil ja salvestatakse muutujas nimega ' loomisnupp ”:
konst loomisnupp = dokument. looElement ( 'nupp' )Järgmiseks ' sisemine Tekst ” atribuut viitab loodud nupule ja määrab määratud nupu tekstiväärtuse järgmiselt:
loomisnupp. sisemine Tekst = 'Click_Me'Lõpuks, ' appendChild() ” lisab loodud nupu DOM-i, viidates muutujale, milles see on argumendina salvestatud:
dokument. keha . lisalaps ( loomisnupp ) ;Ülaltoodud teostuse väljund on järgmine:
2. meetod: looge JavaScriptis nupp, kasutades märgendi 'input' atribuuti 'Type'.
' tüüp ” atribuut tähistab kuvatava sisendelemendi tüüpi. Seda saab kasutada nupu loomiseks, määrates ' nuppu ” sisendsildi atribuudi type väärtusena.
Süntaks
< sisendi tüüp = 'nupp' >Siin, ' nuppu ” näitab sisestusvälja tüüpi.
Vaadake allpool toodud näidet.
Näide
Esiteks kasutame sisendmärgendit, määrake selle tüüp kui ' nuppu ' ja väärtus kui ' Click_Mina ”. Selle tulemusena luuakse nupp. Lisaks käivitab see CreateButton() funktsioon klõpsamisel:
< sisendi tüüp = nupu väärtus = Click_Me onclick = 'looButton()' >JavaScripti failis määratleme ' CreateButton() ” funktsioon, mis lisab lisatud nupule klõpsamisel hoiatuskasti:
funktsiooni loomisnupp ( ) {hoiatus ( 'See on nupp' )
}
Väljund
Käsitletud tehnikaid JavaScriptis nupu loomiseks saab vastavalt nõuetele sobivalt kasutada.
Järeldus
Nupu loomiseks JavaScriptis ' looElement() ” ja „ appendChild() ” meetodeid saab rakendada nupu loomiseks ja selle lisamiseks DOM-is kasutamiseks. Teine tehnika, mida saab nupu loomiseks kasutada, on sisenditüübi määratlemine ja sellega seotud funktsioonide lisamine. Selles artiklis tutvustati JavaScriptis nupu loomise meetodeid.