Hvordan få verdien av tekstinngangsfeltet ved hjelp av JavaScript?

JavaScript kan samhandle med forskjellige websider for å tilby server så vel som kundesiden-tjenester. Meningen med JavaScript er å tilby interaktive elementer på websider for å engasjere brukere. Disse interaktive elementene inkluderer dynamisk styling, å legge inn verdien, få verdi fra skjemaer osv.

I dette innlegget utføres en praktisk implementering av hvordan du får verdien av tekst fra inngangsfeltene ved hjelp av JavaScript.

Det er forskjellige måter å skaffe verdien fra inngangsfeltet ved å bruke JavaScript. Å holde dem i sikte, resultatene av innlegget er:

• • Bruke getElementById i JavaScript
  • Bruker getElementsByClassName i JavaScript

Metode 1: Bruke getElementById i JavaScript

I JavaScript, getElementById Metoden brukes for å få inngangstekstboksverdien med et ID -attributt. Denne metoden brukes for å returnere en utgang med en spesifisert verdi. Det returnerer nullverdien hvis elementet ikke er til stede her. De fleste brukere bruker det til å lese og endre HTML -elementer. Syntaksen til getElementById er som følger:

Syntaks

dokument.getElementById ("InputId").verdi;

I denne syntaksen, getElementById Metode trekker ut verdien ved å passere den samme ID -attributtet “inputId”.

Kode

Et eksempel på å få verdien av inngangstekstfeltet.

trykk på knappen

I koden ovenfor:

• • For det første brukes inngangsfeltet til å ta inngangen fra brukeren.
  • Etter det, GetInputValue () Funksjon brukes til å skaffe verdien som bruker getElementById.verdi.
  • En ny knapp opprettes som har GetInputValue () -funksjonen på OnClick -hendelsen.

Produksjon

Etter å ha utført koden, vises en tekstboks og en knapp. Når du skriver noe ord i tekstboksen og knappen trykkes, vises en varslingsboks som inneholder ordet/teksten skrevet i tekstboksen tidligere. VARSE POPP-er vil være som vist nedenfor:

Metode 2: Bruke getElementsByClassName i JavaScript

I JavaScript, en annen metode kjent som GetElementsByClassName brukes til å få verdien av tekstinngangsfeltet. Den returnerer settet med elementer som er spesifisert av klassenavnet. De getElementsByClassName () Metoden kalles ved hjelp av elementet i dokumentet. Den søker i hele dokumentet og gir utdataene fra alle barneelementer som er til stede i dokumentet. Syntaksen for å bruke denne metoden er gitt nedenfor:

dokument.getElementsByClassName ("InputClass") [0].verdi;

Syntaksen er beskrevet som:

• • InputClass: representerer navnet på klassen.
  • [0]: Det representerer at hvis det ikke er noe matchende element her, så returner du udefinert.

Kode

Ved hjelp av getElementsByClassName -metoden og vise den.

Få verdi

Ovennevnte kode representerer det InputClass er spesifisert som et klassens navn på tekstfeltet. Etter det, GetInputValue () funksjon brukes, der getElementsByClassName () kalles ved hjelp av dokument element ved å spesifisere klassenavnet “InputClass“.

Produksjon

I skjermen ovenfor, verdien “Minhal”Er plassert inne i teksten som er arkivert.

Etter å ha trykket på Få verdi Knapp, verdien lagres og vises som en varslingsmelding i popup-vinduet. På denne måten getElementsByClassName () Metode kan brukes til å få verdien av tekstinngangsfeltet ved hjelp av JavaScript.

Konklusjon

I JavaScript, getElementById () og getElementsByClassName () Metoder brukes for å få verdien av tekstinngangsfeltet. I getElementById () Metode, inngangstekstboksverdien blir trukket ut med en ID -attributt. Mens getElementsByClassName () Metoden returnerer settet med elementer som er spesifisert av klassenavnet. Begge disse metodene støttes av avanserte nettlesere, som inkluderer Chrome, Opera, Safari, etc. Du har lært å trekke ut verdien av tekstinngangsfeltet med JavaScript.