Få elementverdi ved hjelp av JavaScript

Noen ganger ønsker programmerere å endre verdien av ethvert element, slik at de først trenger å få elementet og deretter sjekke verdien av det spesifiserte elementet. Etter det bruker operasjonene på dem. For å få elementets referanse og dets verdi, tilbyr JavaScript noen forhåndsdefinerte metoder eller egenskaper.

Denne opplæringen vil forklare hvordan du får verdien av et element ved hjelp av JavaScript.

Hvordan få elementverdi ved hjelp av JavaScript?

For å få verdien av et HTML -element, bruk "verdi”Eiendom til HTMLDataelement -grensesnittet.

For å få referanse til elementet brukes flere metoder

• getElementById () -metode
• getElementByClass () -metode
• getElementBytagName () -metode
• QuerySelector () -metode
• querySelectorAll () -metode

Her, de mest brukte metodene med “verdi”Eiendom vil bli diskutert.

Eksempel 1: Få elementverdi ved bruk av verdiegenskap med getElementById () -metode

For å få verdien av elementet, bruk "verdi”Eiendom med“getElementById ()”Metode for å få referansen til elementet ved å bruke det tildelte“id”.

Opprett først et skjema i HTML -fil, med et inngangsfelt og en knapp som vil vise den angitte verdien i tekstfeltet på "Klikk" begivenhet:

Få verdien av inngangsfeltet

Følg de gitte kodelinjene:

funksjon getElementValue ()
var verdi = dokument.getElementById ("tekst").verdi;
Varsel (verdi);

I ovennevnte kodebit:

• Først definer en funksjon "getElementValue ()”.
• Hente deretter elementet med IDen "tekst”Og hente verdien ved å bruke“verdi”Eiendom og lagre den i en variabel”verdi”.
• Til slutt, vis verdien av elementet i en varselmelding.

Produksjon

Ovennevnte utgang indikerer at verdien av elementet hentes med hell ved å bruke verdiegenskapen med getElementById () -metoden.

Hvordan få referanse til elementet uten noen spesifisert ID? Følg delen nedenfor.

Eksempel 2: Få elementverdi ved bruk av verdiegenskap med QuerySelector () -metode

En annen måte å få en referanse til et element for å få sin verdi er å bruke “QuerySelector ()”Metode. Det tar en "velger”Av et elements navn som et argument og gir dokumentets første element som samsvarer med den gitte velgeren.

Her, først, lag en rullegardinmeny ved hjelp av Tag, og en knapp som vil utløse “getElementValue ()”Funksjon for å få verdien av valgt alternativ:

Velg språket du vil lære:

Html
CSS
JavaScript
Java
Python



Få verdien av inngangsfeltet

I JavaScript -filen bruker du følgende kode:

funksjon getElementValue ()
var verdi = dokument.QuerySelector ("Velg").verdi;
Varsel (verdi);

I kodelinjene ovenfor:

• Definere en funksjon “getElementValue ()”.
• Deretter, ring "QuerySelector ()”Metode ved å passere en velger”plukke ut”Element med“verdi”Eiendom, som får den valgte verdien av rullegardinmenyen.
• Til slutt, vis den valgte verdien av elementet i en varselmelding.

Utgangen viser de valgte verdiene i en varslingsmelding:

Konklusjon

For å få verdien av DOMs element, bruk "verdi”Egenskapen til HTMLDataelement -grensesnittet med forskjellige metoder for å få referanse til elementet, for eksempel“getElementById ()”Metode,“getElementByClass ()”Metode, eller“QuerySelector ()”Metode. Denne opplæringen forklarte prosedyren for å få elementverdien ved hjelp av JavaScript.