Dit artikel zal de methoden demonstreren om invoertekstwaarden in JavaScript te krijgen en in te stellen.
Hoe de invoertekstwaarde in JavaScript te krijgen en in te stellen?
Om de invoertekstwaarde in JavaScript te krijgen en in te stellen, gebruikt u:
- “ getElementById() ” methode
- “ getElementByClassName() ” methode
- “ querySelector() ” methode
Doorloop elk van de genoemde methoden één voor één!
Methode 1: Invoertekstwaarde ophalen en instellen in JavaScript met de methode document.getElementById()
De ' getElementById() ” heeft toegang tot een element met de opgegeven Id. Deze methode kan worden toegepast om toegang te krijgen tot de id's van de invoervelden en knoppen voor het ophalen en instellen van de tekstwaarde.
Syntaxis
document. getElementById ( elementen )
Hier, ' elementen ” verwijst naar de opgegeven id van een element.
In onderstaand voorbeeld wordt het besproken concept uitgelegd.
Voorbeeld
Voeg eerst twee invoertypevelden en aparte knoppen toe om de invoertekstwaarden op te halen en in te stellen met de “ bij klikken ” gebeurtenissen die toegang hebben tot de gespecificeerde functies:
< knop onclick = 'getText()' > Waarde krijgen knop >
< knop onclick = 'getAndSetText()' > Waarde instellen knop >
< invoertype: = 'tekst' ID kaart = 'setText' naam = 'setText' bij klikken = 'deze.waarde = '' ' />
Haal vervolgens de waarde van het invoerveld op met behulp van de document.getElementById() methode:
document. getElementById ( 'getText' ) . waarde = 'Hier invoeren' ;Declareer nu een functie met de naam ' getAndSetText() ”. Haal hier het invoerveld op met de “ getText ” id en geef de invoerwaarde door aan het volgende invoerveld met “ setText ' ID kaart:
functie getAndSetText ( ) {was setText = document. getElementById ( 'getText' ) . waarde ;
document. getElementById ( 'setText' ) . waarde = setText ;
}
Definieer op dezelfde manier een functie met de naam ' getText() ”. Haal daarna het invoerveld met ' getText ” id en geef de specifieke waarde door aan het waarschuwingsvenster om de invoertekstwaarde te krijgen:
functie getText ( ) {was getText = document. getElementById ( 'getText' ) . waarde ;
alarmeren ( getText ) ;
}
Uitgang:
Methode 2: Invoertekstwaarde ophalen en instellen in JavaScript met de methode document.getElementByClassName()
De ' getElementByClassName() ”-methode benadert een element met behulp van de opgegeven klassenaam. Deze methode kan op dezelfde manier worden toegepast om toegang te krijgen tot de klasse van het invoerveld en knoppen voor het invoeren en instellen van de tekstwaarde.
Syntaxis
document. getElementsByClassName ( naam van de klasse )In de bovenstaande syntaxis is de ' naam van de klasse ” staat voor de klassenaam van elementen.
Voorbeeld
Net als bij het vorige voorbeeld, zullen we eerst toegang krijgen tot het eerste invoerveld met de ' getText ' naam van de klasse. Definieer vervolgens een functie met de naam ' getAndSetText() ” en verkrijg het opgegeven invoerveld op basis van de klassenaam en stel de waarde in het volgende invoerveld in:
functie getAndSetText ( )
{
was setText = document. getElementByClassName ( 'getText' ) . waarde ;
document. getElementById ( 'setText' ) . waarde = setText ;
}
Definieer op dezelfde manier een functie met de naam ' getText() ”, voeg de klassenaam van het eerste invoerveld toe en geef de specifieke waarde door aan het waarschuwingsvenster om de opgehaalde waarde weer te geven:
functie getText ( ) {was getText = document. getElementByClassName ( 'getText' ) . waarde ;
alarmeren ( getText ) ;
}
Deze implementatie zal de volgende output opleveren:
Methode 3: Invoertekstwaarde ophalen en instellen in Javascript met behulp van de 'document.querySelector()'-methode
De ' document.querySelector() ” haalt de eerste e ging naar beneden die overeenkomt met de opgegeven selector, en de methode addEventListener() kan een gebeurtenishandler toevoegen aan het geselecteerde element. Deze methoden kunnen worden toegepast om de id van het invoerveld en de knoppen te krijgen en er een gebeurtenishandler op toe te passen.
Syntaxis
document. querySelector ( CSS-kiezers )Hier, ' CSS-kiezers ” verwijzen naar een of meer CSS-kiezers.
Kijk naar het volgende voorbeeld.
Voorbeeld
Neem eerst invoertypen op met hun tijdelijke aanduiding-waarden en knoppen voor het ophalen en instellen van de invoertekstwaarden:
< knop id = 'krijgen' > KRIJGEN knop >
< invoertype: = 'tekst' ID kaart = 'invoerset' tijdelijke aanduiding = 'Waarde instellen' >
< knop id = 'set' > SET knop >
Haal vervolgens de toegevoegde invoervelden en knoppen op met behulp van de “ document.querySelector() methode:
laat knopGet = document. querySelector ( '#krijgen' ) ;laat knopSet = document. querySelector ( '#set' ) ;
laat getInput = document. querySelector ( '#invoer-krijg' ) ;
laat setInput = document. querySelector ( '#invoerset' ) ;
laat resultaat = document. querySelector ( '#resultaat' ) ;
Voeg vervolgens een gebeurtenishandler toe met de naam ' Klik ” voor beide knoppen om respectievelijk de waarden op te halen en in te stellen:
knopKrijgen. addEventListener ( 'Klik' , ( ) => {resultaat. innerText = krijgInvoer. waarde ;
} ) ;
knopInstellen. addEventListener ( 'Klik' , ( ) => {
krijgInvoer. waarde = setInvoer. waarde ;
} ) ;
Uitgang:
We hebben de eenvoudigste methoden besproken voor het verkrijgen en instellen van invoertekstwaarden in JavaScript.
Conclusie
Om de invoertekstwaarde in JavaScript te krijgen en in te stellen, gebruikt u de ' document.getElementById() ” methode of de
“ document.getElementByClassName() ”-methode voor toegang tot het opgegeven invoerveld en knoppen op basis van hun id’s of klassenaam en stel vervolgens hun waarden in. Bovendien is de “ document.querySelector() ” kan ook worden gebruikt voor het ophalen en instellen van invoertekstwaarden in JavaScript. In deze blog worden de methoden uitgelegd om invoertekstwaarden in JavaScript op te halen en in te stellen.