Hvordan få inngangsverdi i JavaScript

JavaScript tilbyr en rekke funksjoner for å lage interaktive grensesnitt. Man kan hente verdien av et hvilket som helst element ved hjelp av JavaScript -metoder. Inngangsverdien kan skrives ut et sted på websiden, eller den kan fås som en varslingsmelding. Alt dette er mulig ved hjelp av JavaScript. Her vil vi beskrive JavaScript støtte for å få inngangsverdien fra ethvert element. Følgende læringsutbytte forventes:

• Hvordan få inngangsverdi i JavaScript
• Få inngangsverdien ved hjelp av getElementById () -metoden
• Få inngangsverdien ved hjelp av getElementsByClassName () -metoden
• Få inngangsverdi ved bruk av QuerySelector () -metode

Hvordan få inngangsverdi i JavaScript

JavaScript gir to egenskaper for å få inngangsverdiene ved å bruke getElementById, GetElementsByClassName, og QuerySelector metoder. Disse metodene trekker ut strengen så vel som den numeriske verdien for å vise brukerinformasjonen. Alle de berømte nettleserne støtter begge disse egenskapene. De verdi Eiendom returnerer informasjonen til brukeren. Dessuten er eiendommen nyttig for å tilordne hvilken som helst spesifikk verdi for visning i nettleservinduet.

Syntaksen til disse metodene er angitt nedenfor.

Syntaks av getElementById

dokument.getElementById ("TextID").verdi = "text_message";

Syntaks av GetElementsByClassName

dokument.GetElementsByClassName ("Clname").verdi;

Syntaks av QuerySelector

dokument.QuerySelector ("ID1").verdi

Beskrivelsen av ovennevnte parametere er som nedenfor:

• TextID: betegner IDen til et element.
• tekstmelding: representerer meldingen som skal vises.
• Clname: Spesifiser navnet på klassen.
• Id1: representerer ID eller klasse av et HTML -element.

Eksempel 1: Få inngangsverdien ved å bruke metoden GetElementById ()

Et annet eksempel vurderes for å få inngangsverdien i JavaScript.

Html

Et eksempel for å få verdien av tekstfeltet

Favorittmelding:

Trykk på knappen for å vise tekstverdien.

Skjermknapp

HTML -koden får inngangsverdien “Velkommen til JavaScript”Ved å trykke på“Skjermknapp”. Knappen er festet med Display_fn () metode.

JavaScript

funksjon display_fn ()
var a = dokument.getElementById ("MTXT").verdi;
dokument.getElementById ("Demo").indrehtml = a;

En metode Display_fn () er ansatt for å hente verdien av tekst i HTML -filen av getElementById.

Eksempel 2: Få inngangsverdien ved å bruke metoden GetElementSByClassName ()

Et eksempel anses for å få den numeriske verdien fra inngangsfeltet i JavaScript.

HTML -fil

Et eksempel for å få den numeriske verdien av feltet

Få numerisk verdi

I denne koden er beskrivelsen som nedenfor:

• Klassen Inpcls brukes til å legge inn det numeriske nummeret.
• Etter det er en knapp vedlagt som er assosiert med getInpval () metode.
• Til slutt en JavaScript -fil test.JS kobles ved å tildele kilden src variabel.

JavaScript

funksjon getInpVal ()
La InpVal = dokument.GetElementsByClassName ("INPCLS") [0].verdi;
Varsel (inpVal);

I JavaScript -filen:

• En metode getInpval () brukes til å trekke ut verdien fra Html fil.
• Ekstraksjonen utføres av GetelementbyClassName (“INPCLS”) [0].verdi.
• Til slutt genereres en varslingsmelding ved å passere Inpval variabel.

Produksjon

Utgangen viser at brukeren først legger inn et hvilket som helst tall. Etter det genereres en varslingsboks ved å trykke på “Få numerisk verdi”-Knappen.

Eksempel 3: Få inngangsverdi ved bruk av QuerySelector () -metode

Et annet eksempel anses for å få verdien ved å bruke QuerySelector () metode.

Kode

Få verdi ved hjelp av spørringsvelgeren

Skjermknapp

I denne koden er beskrivelsen som følger:

• For det første, a tekstboks og a knapp er festet med og Tagger.
• De knapp er assosiert med getValueInput () metode.
• I denne metoden, QuerySelector () er ansatt for å trekke ut verdien av tekstboks og vise den ved hjelp av Val1.

Produksjon

Utgangen viser meldingen “JavaScript”Ved å trykke på knappen i nettleseren.

Konklusjon

De getElementById, GetElementsByClassName, og QuerySelector () Metoder brukes for å få inngangsverdien i JavaScript. De to første metodene henter elementene ved å bruke ID- og klassenavnet. Mens den tredje metoden kan få elementene til å bruke en ID så vel som et klassenavn. Her har du lært å bruke alle disse tre metodene for å få inngangsverdier i JavaScript.