Denne oppskriften vil demonstrere metodene for å hente og sette inn tekstverdier i JavaScript.
Hvordan få og angi inngangstekstverdi i JavaScript?
For å få og angi inngangstekstverdi i JavaScript, bruk:
- ' getElementById() 'metoden
- ' getElementByClassName() 'metoden
- ' querySelector() 'metoden
Gå gjennom hver av de nevnte metodene en etter en!
Metode 1: Hent og sett inn tekstverdi i JavaScript ved å bruke document.getElementById()-metoden
« getElementById() ”-metoden får tilgang til et element med spesifisert ID. Denne metoden kan brukes for å få tilgang til ID-ene til inndatafeltene og knappene for å hente og angi tekstverdien.
Syntaks
dokument. getElementById ( elementer )
Her, ' elementer ” refererer til den angitte ID-en til et element.
Eksemplet nedenfor forklarer det diskuterte konseptet.
Eksempel
For det første, ta med to inndatatypefelt og separate knapper for å hente og stille inn tekstverdiene med ' ved trykk ' hendelser som vil få tilgang til de angitte funksjonene:
< knappen ved å klikke = 'getText()' > Få verdi knapp >
< knappen ved å klikke = 'getAndSetText()' > Sett verdi knapp >
< inndatatype = 'tekst' id = 'setttekst' Navn = 'setttekst' ved trykk = 'this.value = '' ' />
Deretter får du verdien av inndatafeltet ved hjelp av document.getElementById()-metoden:
dokument. getElementById ( 'getText' ) . verdi = 'Input her' ;Deklarer nå en funksjon som heter ' getAndSetText() '. Her henter du inntastingsfeltet med ' getText ' id og gi inndataverdien til neste inndatafelt med ' settTekst ' id:
funksjon getAndSetText ( ) {var settTekst = dokument. getElementById ( 'getText' ) . verdi ;
dokument. getElementById ( 'setttekst' ) . verdi = settTekst ;
}
På samme måte definerer du en funksjon kalt ' getText() '. Etter det, få inntastingsfeltet med ' getText ” id og gi den spesielle verdien til varslingsboksen for å få inndatatekstverdien:
funksjon getText ( ) {var getText = dokument. getElementById ( 'getText' ) . verdi ;
varsling ( getText ) ;
}
Produksjon
Metode 2: Hent og sett inn tekstverdi i JavaScript ved å bruke document.getElementByClassName()-metoden
« getElementByClassName() ”-metoden får tilgang til et element ved hjelp av det angitte klassenavnet. Denne metoden kan på samme måte brukes for å få tilgang til klassen til inndatafeltet og knapper for å angi og angi tekstverdien.
Syntaks
dokument. getElementsByClassName ( klassenavn )I syntaksen ovenfor, ' klassenavn ” representerer klassenavnet på elementer.
Eksempel
I likhet med forrige eksempel vil vi først få tilgang til det første inndatafeltet med ' getText ' klassenavn. Definer deretter en funksjon kalt ' getAndSetText() ' og få det angitte inndatafeltet basert på klassenavnet og angi verdien i neste inndatafelt:
funksjon getAndSetText ( )
{
var settTekst = dokument. getElementByClassName ( 'getText' ) . verdi ;
dokument. getElementById ( 'setttekst' ) . verdi = settTekst ;
}
På samme måte definerer du en funksjon kalt ' getText() ”, legg til klassenavnet til det første inndatafeltet og send den spesielle verdien til varselboksen for å vise den hentede verdien:
funksjon getText ( ) {var getText = dokument. getElementByClassName ( 'getText' ) . verdi ;
varsling ( getText ) ;
}
Denne implementeringen vil gi følgende resultater:
Metode 3: Hent og still inn tekstverdi i Javascript ved å bruke 'document.querySelector()'-metoden
« document.querySelector() ” henter den første e gikk ned som samsvarer med den angitte velgeren, og addEventListener()-metoden kan legge til en hendelsesbehandler til det valgte elementet. Disse metodene kan brukes for å få ID-en til inndatafeltet og knappene og bruke en hendelsesbehandler på dem.
Syntaks
dokument. querySelector ( CSS-velgere )Her, ' CSS-velgere ' refererer til en eller flere CSS-velgere.
Se på følgende eksempel.
Eksempel
Ta først med inndatatyper med plassholderverdier og knapper for å hente og angi inndatatekstverdier:
< knappen ID = 'få' > FÅ knapp >
< inndatatype = 'tekst' id = 'inngangssett' plassholder = 'Angi verdi' >
< knappen ID = 'sett' > SETT knapp >
Deretter henter du de lagte inndatafeltene og knappene ved å bruke ' document.querySelector() ' metode:
la knappenHent = dokument. querySelector ( '#få' ) ;la knappenSett = dokument. querySelector ( '#sett' ) ;
la getInput = dokument. querySelector ( '#input-get' ) ;
la setInput = dokument. querySelector ( '#input-set' ) ;
la resultatet = dokument. querySelector ( '#resultat' ) ;
Inkluder deretter en hendelsesbehandler kalt ' klikk ' for begge knappene for å hente og angi verdiene, henholdsvis:
knappenHent. addEventListener ( 'klikk' , ( ) => {resultat. indreTekst = getInput. verdi ;
} ) ;
knappsett. addEventListener ( 'klikk' , ( ) => {
getInput. verdi = setInput. verdi ;
} ) ;
Produksjon
Vi har diskutert de enkleste metodene for å få og sette inn tekstverdi i JavaScript.
Konklusjon
For å få og angi inngangstekstverdi i JavaScript, bruk ' document.getElementById() ”-metoden eller
' document.getElementByClassName() ” metode for å få tilgang til det angitte inndatafeltet og knappene basert på deres id eller klassenavn og deretter angi verdiene deres. Dessuten, ' document.querySelector() ” kan også brukes til å hente og sette inn tekstverdier i JavaScript. Denne bloggen forklarte metodene for å hente og angi inngangstekstverdier i JavaScript.