Šis raksts demonstrēs metodes, kā iegūt un iestatīt ievades teksta vērtības JavaScript.
Kā iegūt un iestatīt ievades teksta vērtību JavaScript?
Lai iegūtu un iestatītu ievades teksta vērtību JavaScript, izmantojiet:
- ' getElementById() ” metode
- ' getElementByClassName() ” metode
- ' querySelector() ” metode
Izejiet katru no minētajām metodēm pa vienam!
1. metode: iegūstiet un iestatiet ievades teksta vērtību programmā JavaScript, izmantojot metodi document.getElementById()
' getElementById() ” metode piekļūst elementam ar norādīto ID. Šo metodi var izmantot, lai piekļūtu ievades lauku ID un teksta vērtības iegūšanai un iestatīšanas pogām.
Sintakse
dokumentu. getElementById ( elementi )
Šeit, ' elementi ” attiecas uz norādīto elementa ID.
Tālāk sniegtajā piemērā ir izskaidrota apspriestā koncepcija.
Piemērs
Pirmkārt, iekļaujiet divus ievades veida laukus un atsevišķas pogas, lai iegūtu un iestatītu ievades teksta vērtības ar ' onclick ” notikumi, kas piekļūs norādītajām funkcijām:
< pogu onclick = 'getText()' > Iegūstiet vērtību pogu >
< pogu onclick = 'getAndSetText()' > Iestatiet vērtību pogu >
< ievades veids = 'teksts' id = 'setText' nosaukums = 'setText' onclick = 'this.value = '' />
Pēc tam iegūstiet ievades lauka vērtību, izmantojot metodi document.getElementById():
dokumentu. getElementById ( 'getText' ) . vērtību = 'Ievadiet šeit' ;Tagad deklarējiet funkciju ar nosaukumu ' getAndSetText() ”. Šeit iegūstiet ievades lauku ar “ getText ” id un nododiet ievades vērtību nākamajam ievades laukam ar “ setText ”id:
funkciju getAndSetText ( ) {bija setText = dokumentu. getElementById ( 'getText' ) . vērtību ;
dokumentu. getElementById ( 'setText' ) . vērtību = setText ;
}
Līdzīgi definējiet funkciju ar nosaukumu ' getText() ”. Pēc tam iegūstiet ievades lauku ar “ getText ” id un nosūtiet konkrēto vērtību brīdinājuma lodziņā, lai iegūtu ievades teksta vērtību:
funkciju getText ( ) {bija getText = dokumentu. getElementById ( 'getText' ) . vērtību ;
brīdinājums ( getText ) ;
}
Izvade
2. metode: iegūstiet un iestatiet ievades teksta vērtību programmā JavaScript, izmantojot metodi document.getElementByClassName()
' getElementByClassName() ” metode piekļūst elementam ar norādītā klases nosaukuma palīdzību. Šo metodi līdzīgi var izmantot, lai piekļūtu ievades lauka klasei un pogām teksta vērtības ievadīšanai un iestatīšanai.
Sintakse
dokumentu. getElementsByClassName ( klases nosaukums )Iepriekš minētajā sintaksē ' klases nosaukums ” apzīmē elementu klases nosaukumu.
Piemērs
Līdzīgi kā iepriekšējā piemērā, mēs vispirms piekļūsim pirmajam ievades laukam ar “ getText ” klases nosaukums. Pēc tam definējiet funkciju ar nosaukumu ' getAndSetText() ” un iegūstiet norādīto ievades lauku, pamatojoties uz tā klases nosaukumu, un iestatiet vērtību nākamajā ievades laukā:
funkciju getAndSetText ( )
{
bija setText = dokumentu. getElementByClassName ( 'getText' ) . vērtību ;
dokumentu. getElementById ( 'setText' ) . vērtību = setText ;
}
Tāpat definējiet funkciju ar nosaukumu ' getText() ”, pievienojiet pirmā ievades lauka klases nosaukumu un nosūtiet konkrēto vērtību brīdinājuma lodziņā, lai parādītu ienesto vērtību:
funkciju getText ( ) {bija getText = dokumentu. getElementByClassName ( 'getText' ) . vērtību ;
brīdinājums ( getText ) ;
}
Šī ieviešana dos šādu rezultātu:
3. metode: iegūstiet un iestatiet ievades teksta vērtību programmā Javascript, izmantojot metodi “document.querySelector()”
' document.querySelector() ” atnes pirmo e noiet lejā kas atbilst norādītajam atlasītājam, un metode addEventListener() var pievienot notikumu apdarinātāju atlasītajam elementam. Šīs metodes var izmantot, lai iegūtu ievades lauka un pogu ID un lietotu tām notikumu apdarinātāju.
Sintakse
dokumentu. querySelector ( CSS atlasītāji )Šeit, ' CSS atlasītāji ” attiecas uz vienu vai vairākiem CSS atlasītājiem.
Apskatiet šādu piemēru.
Piemērs
Pirmkārt, iekļaujiet ievades veidus ar to vietturu vērtībām un pogas, lai iegūtu un iestatītu ievades teksta vērtības:
< pogas id = 'gūt' > GŪT pogu >
< ievades veids = 'teksts' id = 'ievades komplekts' vietturis = 'Iestatīt vērtību' >
< pogas id = 'komplekts' > IESTATĪT pogu >
Pēc tam iegūstiet pievienotos ievades laukus un pogas, izmantojot “ document.querySelector() ” metode:
ļaujiet pogaiSaņemt = dokumentu. querySelector ( '#gūt' ) ;ļaut pogaIestatīt = dokumentu. querySelector ( '#set' ) ;
ļaujiet getInput = dokumentu. querySelector ( '#input-get' ) ;
ļaujiet iestatīt ievadi = dokumentu. querySelector ( '#input-set' ) ;
ļaujiet rezultātu = dokumentu. querySelector ( '#rezultāts' ) ;
Pēc tam iekļaujiet notikumu apstrādātāju ar nosaukumu “ klikšķis ” abām pogām, lai attiecīgi iegūtu un iestatītu vērtības:
pogaSaņemt. addEventListener ( 'klikšķis' , ( ) => {rezultāts. iekšējaisTeksts = getInput. vērtību ;
} ) ;
pogaIestatīt. addEventListener ( 'klikšķis' , ( ) => {
getInput. vērtību = setInput. vērtību ;
} ) ;
Izvade
Mēs esam apsprieduši vienkāršākās metodes ievades teksta vērtības iegūšanai un iestatīšanai JavaScript.
Secinājums
Lai iegūtu un iestatītu ievades teksta vērtību JavaScript, izmantojiet ' document.getElementById() ” metodi vai
' document.getElementByClassName() ” metodi, lai piekļūtu norādītajam ievades laukam un pogām, pamatojoties uz to ID vai klases nosaukumu, un pēc tam iestatiet to vērtības. Turklāt ' document.querySelector() ” var izmantot arī, lai iegūtu un iestatītu ievades teksta vērtības JavaScript. Šajā emuārā ir izskaidrotas metodes, kā iegūt un iestatīt ievades teksta vērtības JavaScript.