Hvordan få og angi inngangstekstverdi i JavaScript

På de fleste websider er det påkrevd å få inngangstekstverdien fra brukerne for å legge inn riktige data og sikre datasikkerhet. For eksempel må du få, sette eller lagre noen spesifikke data for å bruke dem for videre behandling. I slike tilfeller blir det veldig nyttig for å beskytte data om inngangstekstverdi i JavaScript.

Denne oppskrivningen vil demonstrere metodene for å få og angi inngangstekstverdier i JavaScript.

Hvordan få og angi inngangstekstverdi i JavaScript?

For å få og angi inngangstekstverdi i JavaScript, bruk:

• “getElementById ()”Metode
• “getElementByClassName ()”Metode
• “QuerySelector ()”Metode

Gå gjennom hver av de nevnte metodene en etter en!

Metode 1: Få og angi inngangstekstverdi i JavaScript ved hjelp av dokument.getElementById () -metode

“getElementById ()”Metode får tilgang til et element med den spesifiserte IDen. Denne metoden kan brukes for å få tilgang til ID -ene til inngangsfeltene og knappene for å få og angi tekstverdien.

Syntaks

dokument.getElementById (ElementId)

Her, “ElementId”Refererer til den spesifiserte IDen til et element.

Eksemplet nedenfor forklarer det diskuterte konseptet.

Eksempel
Først, inkluderer to inndatatypefelt og separate knapper for å få og sette inn inngangstekstverdiene med "ved trykk”Hendelser som vil få tilgang til de spesifiserte funksjonene:

Få verdi
Sett verdi

Få deretter verdien av inngangsfeltet ved hjelp av dokumentet.getElementById () Metode:

dokument.getElementById ('getText').verdi = "input her";

Nå, erklærer en funksjon som heter “getandSetText ()”. Her kan du hente inngangsfeltet med "getText”Id og pass inngangsverdien til neste inngangsfelt som har“Settekst”Id:

funksjon getandSetText ()
var setText = dokument.getElementById ('getText').verdi;
dokument.getElementById ('SettExt').Verdi = SetText;

Tilsvarende definer en funksjon som heter “getText ()”. Etter det, få inngangsfeltet med "getText”Id og send den spesielle verdien til varslingsboksen for å få inngangstekstverdien:

funksjon getText ()
var getText = dokument.getElementById ('getText').verdi;
Varsel (getText);

Produksjon

Metode 2: Få og angi inngangstekstverdi i JavaScript ved hjelp av dokument.getElementByClassName () Metode

“getElementByClassName ()”Metode får tilgang til et element ved hjelp av det spesifiserte klassenavnet. Denne metoden kan på samme måte brukes for å få tilgang til klassen på inngangsfeltet og knappene for å legge inn og angi tekstverdien.

Syntaks

dokument.getElementsByClassName (ClassName)

I syntaks ovenfor, "klassenavn”Representerer klassens navn på elementer.

Eksempel
I likhet med det forrige eksemplet, vil vi først få tilgang til det første inngangsfeltet med "getText" klassenavn. Deretter definerer du en funksjon som heter “getandSetText ()”Og få det spesifiserte inngangsfeltet basert på klassenavnet og angi verdien i neste inngangsfelt:

dokument.getElementByClassName ('GetText').verdi = "input her";
funksjon getandSetText ()

var setText = dokument.getElementByClassName ('GetText').verdi;
dokument.getElementById ('SettExt').Verdi = SetText;

På samme måte definer en funksjon som heter “getText ()”, Legg til klassenavnet til det første inngangsfeltet og pass den spesielle verdien til varslingsboksen for å vise den hentede verdien:

funksjon getText ()
var getText = dokument.getElementByClassName ('GetText').verdi;
Varsel (getText);

Denne implementeringen vil gi følgende utgang:

Metode 3: Få og angi inngangstekstverdi i JavaScript ved å bruke “Dokument.QuerySelector () ”-metode

“dokument.QuerySelector ()”Henter det første elementet som samsvarer med den spesifiserte velgeren, og AddEventListener () -metoden kan legge til en hendelsesbehandler til det valgte elementet. Disse metodene kan brukes for å få ID for inngangsfeltet og knappene og bruke en hendelsesbehandler på dem.

Syntaks

dokument.QuerySelector (CSS Selectors)

Her, “CSS -velgere”Se en eller flere CSS -velgere.

Se på følgende eksempel.

Eksempel
For det første, inkluder inndatatyper med sine plassholderverdier og knapper for å få og sette inn inngangstekstverdiene:

FÅ

SETT

Deretter henter du de ekstra inngangsfeltene og knappene ved å bruke “dokument.QuerySelector ()”Metode:

La Buttoget = dokument.querySelector ('#get');
La ButtonsSet = dokument.querySelector ('#set');
La getInput = dokument.querySelector ('#input-get');
La setInput = dokument.QuerySelector ('#input-set');
La resultat = dokument.QuerySelector ('#Resultat');

Inkluder deretter en hendelsesbehandler som heter “Klikk”For begge knappene for å få og angi verdien, henholdsvis:

BUTTOGET.AddEventListener ('klikk', () =>
resultat.Innertext = getInput.verdi;
);
knappet.AddEventListener ('klikk', () =>
GetInput.verdi = setInput.verdi;
);

Produksjon

Vi har diskutert de enkleste metodene for å få og sette inn inngangstekstverdi i JavaScript.

Konklusjon

For å få og angi inngangstekstverdi i JavaScript, bruk "dokument.getElementById ()”Metode eller

“dokument.getElementByClassName ()”Metode for tilgang til det spesifiserte inngangsfeltet og knappene basert på ID -er eller klassenavn og deretter angi verdiene. Dessuten "dokument.QuerySelector ()”Kan også brukes til å få og sette inn inngangstekstverdier i JavaScript. Denne bloggen forklarte metodene for å få og angi inngangstekstverdier i JavaScript.