Kuidas saada ja määrata sisendteksti väärtus JavaScriptis

Enamikel veebilehtedel on õigete andmete sisestamiseks ja andmete turvalisuse tagamiseks vaja kasutajatelt saada sisendteksti väärtus. Näiteks peate hankima, määrama või salvestama teatud andmed, et neid edasiseks töötlemiseks kasutada. Sellistel juhtudel on andmete privaatsuse kaitsmisel palju abi JavaScriptis sisendteksti väärtuse hankimisest ja määramisest.

See kirjutis demonstreerib meetodeid sisendteksti väärtuste hankimiseks ja määramiseks JavaScriptis.

Kuidas saada ja määrata sisendteksti väärtus JavaScriptis?

JavaScriptis sisendteksti väärtuse hankimiseks ja määramiseks kasutage:

“ getElementById() ” meetod
“ getElementByClassName() ” meetod
“ querySelector() ” meetod

Vaadake ükshaaval läbi kõik nimetatud meetodid!

1. meetod: hankige ja määrake sisendteksti väärtus JavaScriptis, kasutades meetodit document.getElementById()

' getElementById() ” meetod pääseb juurde määratud ID-ga elemendile. Seda meetodit saab kasutada sisestusväljade ID-dele ja nuppudele juurdepääsuks tekstiväärtuse hankimiseks ja seadistamiseks.

Süntaks

dokument. getElementById ( elementID )

Siin, ' elementID ” viitab elemendi määratud ID-le.

Allpool toodud näide selgitab käsitletud kontseptsiooni.

Näide
Esiteks lisage kaks sisestustüübi välja ja eraldi nupud sisendteksti väärtuste hankimiseks ja määramiseks nupuga ' onclick ” sündmused, mis pääsevad juurde määratud funktsioonidele:

< sisendi tüüp = 'tekst' id = 'hanki tekst' nimi = 'hanki tekst' onclick = 'this.value = '' />
< nupp onclick = 'getText()' > Hankige väärtust nuppu >
< nupp onclick = 'getAndSetText()' > Määra väärtus nuppu >
< sisendi tüüp = 'tekst' id = 'setText' nimi = 'setText' onclick = 'this.value = '' />

Seejärel hankige sisestusvälja väärtus meetodi document.getElementById() abil:

dokument. getElementById ( 'getText' ) . väärtus = 'Sisesta siia' ;

Nüüd deklareerige funktsioon nimega ' getAndSetText() ”. Siit tooge sisestusväli koos ' saadaTeksti ' id ja edastage sisendväärtus järgmisele sisestusväljale, millel on ' setText 'id:

funktsiooni getAndSetText ( ) {
oli setText = dokument. getElementById ( 'getText' ) . väärtus ;
dokument. getElementById ( 'setText' ) . väärtus = setText ;
}

Samamoodi määratlege funktsioon nimega ' getText() ”. Pärast seda hankige sisestusväli ' saadaTeksti ” id ja edastage konkreetne väärtus hoiatuskasti, et saada sisendteksti väärtus:

funktsiooni saadaTeksti ( ) {
oli saadaTeksti = dokument. getElementById ( 'getText' ) . väärtus ;
hoiatus ( saadaTeksti ) ;
}

Väljund

2. meetod: hankige ja määrake sisendteksti väärtus JavaScriptis, kasutades meetodit document.getElementByClassName()

' getElementByClassName() ” meetod pääseb elemendile juurde määratud klassinime abil. Seda meetodit saab kasutada ka sisestusvälja klassi ja tekstiväärtuse sisestamise ja seadistamise nuppude jaoks.

Süntaks

dokument. getElementsByClassName ( klassi nimi )

Ülaltoodud süntaksis on ' klassi nimi ” tähistab elementide klassinime.

Näide
Sarnaselt eelmisele näitele pääseme esmalt esimesele sisestusväljale ' saadaTeksti ” klassi nimi. Seejärel määrake funktsioon nimega ' getAndSetText() ” ja hankige määratud sisestusväli selle klassi nime põhjal ja määrake väärtus järgmisele sisestusväljale:

dokument. getElementByClassName ( 'getText' ) . väärtus = 'Sisesta siia' ;
funktsiooni getAndSetText ( )
{
oli setText = dokument. getElementByClassName ( 'getText' ) . väärtus ;
dokument. getElementById ( 'setText' ) . väärtus = setText ;
}

Samuti määrake funktsioon nimega ' getText() ”, lisage esimesele sisestusväljale klassi nimi ja edastage konkreetne väärtus hoiatuskasti, et kuvada toodud väärtus:

funktsiooni saadaTeksti ( ) {
oli saadaTeksti = dokument. getElementByClassName ( 'getText' ) . väärtus ;
hoiatus ( saadaTeksti ) ;
}

See rakendamine annab järgmise väljundi:

3. meetod: hankige ja määrake sisendteksti väärtus Javascriptis, kasutades meetodit 'document.querySelector()'

' document.querySelector() ” toob esimene e läks põhja mis vastab määratud valijale, ja meetod addEventListener() saab lisada valitud elemendile sündmuste käitleja. Neid meetodeid saab rakendada sisestusvälja ja nuppude ID hankimiseks ning sündmuste käitleja rakendamiseks.

Süntaks

dokument. querySelector ( CSS-i valijad )

Siin, ' CSS-i valijad ” viitavad ühele või mitmele CSS-valijale.

Vaadake järgmist näidet.

Näide
Esiteks lisage sisestustüübid koos nende kohatäiteväärtustega ja nupud sisendteksti väärtuste hankimiseks ja määramiseks:

< sisendi tüüp = 'tekst' id = 'sisend-saada' kohatäide = 'Hanki väärtust' >
< nupu id = 'saada' > SAADA nuppu >
< sisendi tüüp = 'tekst' id = 'sisendkomplekt' kohatäide = 'Määra väärtus' >
< nupu id = 'seatud' > SET nuppu >

Järgmisena tooge lisatud sisestusväljad ja nupud, kasutades ' document.querySelector() ” meetod:

lase nupul Hangi = dokument. querySelector ( '#hanki' ) ;
lase nuppMäära = dokument. querySelector ( '#set' ) ;
lase saada sisend = dokument. querySelector ( '#input-get' ) ;
lase setInput = dokument. querySelector ( '#input-set' ) ;
lase tulemuseks = dokument. querySelector ( '#tulemus' ) ;

Seejärel lisage sündmuste töötleja nimega ' klõpsa ” mõlema nupu jaoks väärtuste saamiseks ja seadistamiseks:

nuppHangi. addEventListener ( 'klõps' , ( ) => {
tulemus. sisemine Tekst = hankige sisend. väärtus ;
} ) ;
nuppMäära. addEventListener ( 'klõps' , ( ) => {
hankige sisend. väärtus = setInput. väärtus ;
} ) ;

Väljund

Oleme arutanud JavaScriptis sisendteksti väärtuse hankimise ja seadistamise lihtsamaid meetodeid.

Järeldus

JavaScriptis sisendteksti väärtuse hankimiseks ja määramiseks kasutage ' document.getElementById() ” meetod või

“ document.getElementByClassName() ” meetod, et pääseda juurde määratud sisestusväljale ja nuppudele nende ID-de või klassi nime alusel ning seejärel määrata nende väärtused. Veelgi enam, ' document.querySelector() ” saab kasutada ka JavaScriptis sisendteksti väärtuste hankimiseks ja seadistamiseks. Selles ajaveebis selgitati JavaScriptis sisendteksti väärtuste hankimise ja määramise meetodeid.

Kuidas saada ja määrata sisendteksti väärtus JavaScriptis