Denne opskrivning vil demonstrere metoderne til at hente og indstille inputtekstværdier i JavaScript.
Hvordan får og indstiller man inputtekstværdi i JavaScript?
For at hente og indstille inputtekstværdi i JavaScript skal du bruge:
- “ getElementById() ” metode
- “ getElementByClassName() ” metode
- “ querySelector() ” metode
Gennemgå hver af de nævnte metoder én efter én!
Metode 1: Hent og angiv inputtekstværdi i JavaScript ved hjælp af document.getElementById()-metoden
Det ' getElementById() ”-metoden får adgang til et element med det angivne id. Denne metode kan anvendes til at få adgang til id'erne for inputfelterne og knapperne til at hente og indstille tekstværdien.
Syntaks
dokument. getElementById ( elementer )
Her, ' elementer ” refererer til det angivne id for et element.
Nedenstående eksempel forklarer det diskuterede koncept.
Eksempel
For det første skal du inkludere to inputtypefelter og separate knapper til at hente og indstille inputtekstværdierne med ' onclick ” hændelser, som vil få adgang til de angivne funktioner:
< knap ved klik = 'getText()' > Få værdi knap >
< knap ved klik = 'getAndSetText()' > Indstil værdi knap >
< input type = 'tekst' id = 'sætTekst' navn = 'sætTekst' onclick = 'this.value = '' ' />
Hent derefter værdien af inputfeltet ved hjælp af document.getElementById() metoden:
dokument. getElementById ( 'getText' ) . værdi = 'Input her' ;Erklær nu en funktion ved navn ' getAndSetText() ”. Hent her indtastningsfeltet med ' getTekst ' id og send inputværdien til det næste inputfelt med ' sætTekst ' id:
fungere getAndSetText ( ) {var sætTekst = dokument. getElementById ( 'getText' ) . værdi ;
dokument. getElementById ( 'setTekst' ) . værdi = sætTekst ;
}
På samme måde skal du definere en funktion ved navn ' getText() ”. Hent derefter indtastningsfeltet med ' getTekst ” id og send den bestemte værdi til advarselsboksen for at få inputtekstværdien:
fungere getTekst ( ) {var getTekst = dokument. getElementById ( 'getText' ) . værdi ;
alert ( getTekst ) ;
}
Produktion
Metode 2: Hent og angiv inputtekstværdi i JavaScript ved hjælp af document.getElementByClassName()-metoden
Det ' getElementByClassName() ”-metoden får adgang til et element ved hjælp af det angivne klassenavn. Denne metode kan på samme måde anvendes til at få adgang til klassen for inputfeltet og knapper til indtastning og indstilling af tekstværdien.
Syntaks
dokument. getElementsByClassName ( klassenavn )I ovenstående syntaks er ' klassenavn ” repræsenterer klassenavnet på elementer.
Eksempel
I lighed med det foregående eksempel vil vi først få adgang til det første inputfelt med ' getTekst ' klassenavn. Definer derefter en funktion med navnet ' getAndSetText() ” og få det angivne inputfelt baseret på dets klassenavn og indstil værdien i det næste inputfelt:
fungere getAndSetText ( )
{
var sætTekst = dokument. getElementByClassName ( 'getText' ) . værdi ;
dokument. getElementById ( 'setTekst' ) . værdi = sætTekst ;
}
Definer ligeledes en funktion ved navn ' getText() ”, tilføj klassenavnet på det første inputfelt og send den bestemte værdi til advarselsboksen for at vise den hentede værdi:
fungere getTekst ( ) {var getTekst = dokument. getElementByClassName ( 'getText' ) . værdi ;
alert ( getTekst ) ;
}
Denne implementering vil give følgende output:
Metode 3: Hent og indstil inputtekstværdi i Javascript ved hjælp af metoden 'document.querySelector()'
Det ' document.querySelector() ” henter den første e gik ned der matcher den angivne vælger, og metoden addEventListener() kan tilføje en hændelseshandler til det valgte element. Disse metoder kan anvendes til at få id'et for inputfeltet og knapperne og anvende en hændelseshandler til dem.
Syntaks
dokument. querySelector ( CSS-vælgere )Her, ' CSS-vælgere ” henviser til en eller flere CSS-vælgere.
Se på følgende eksempel.
Eksempel
For det første skal du inkludere inputtyper med deres pladsholderværdier og knapper til at hente og indstille inputtekstværdierne:
< knap-id = 'få' > FÅ knap >
< input type = 'tekst' id = 'input-sæt' pladsholder = 'Indstil værdi' >
< knap-id = 'sæt' > SÆT knap >
Hent derefter de tilføjede inputfelter og knapper ved hjælp af ' document.querySelector() ” metode:
lad knappenHent = dokument. querySelector ( '#få' ) ;lad knapSæt = dokument. querySelector ( '#sæt' ) ;
lad getInput = dokument. querySelector ( '#input-get' ) ;
lad setInput = dokument. querySelector ( '#input-sæt' ) ;
lad resultatet = dokument. querySelector ( '#resultat' ) ;
Inkluder derefter en hændelseshandler ved navn ' klik ” for begge knapper for at hente og indstille værdierne, henholdsvis:
knapHent. addEventListener ( 'klik' , ( ) => {resultat. indreTekst = få input. værdi ;
} ) ;
knapsæt. addEventListener ( 'klik' , ( ) => {
få input. værdi = sætIndgang. værdi ;
} ) ;
Produktion
Vi har diskuteret de enkleste metoder til at hente og indstille inputtekstværdi i JavaScript.
Konklusion
For at få og indstille input tekstværdi i JavaScript skal du bruge ' document.getElementById() ”-metoden eller
“ document.getElementByClassName() ” metode til at få adgang til det angivne inputfelt og knapper baseret på deres id'er eller klassenavn og derefter indstille deres værdier. Desuden er ' document.querySelector() ” kan også bruges til at hente og indstille inputtekstværdier i JavaScript. Denne blog forklarede metoderne til at hente og indstille inputtekstværdier i JavaScript.