In diesem Artikel werden die Methoden zum Abrufen und Festlegen von Eingabetextwerten in JavaScript demonstriert.
Wie erhalte und setze ich den Eingabetextwert in JavaScript?
Verwenden Sie zum Abrufen und Festlegen des Eingabetextwerts in JavaScript:
- „ getElementById() ' Methode
- „ getElementByClassName() ' Methode
- „ querySelector() ' Methode
Gehen Sie jede der genannten Methoden einzeln durch!
Methode 1: Eingabetextwert in JavaScript mit der Methode document.getElementById() abrufen und festlegen
Das ' getElementById() ”-Methode greift auf ein Element mit der angegebenen Id zu. Diese Methode kann angewendet werden, um auf die IDs der Eingabefelder und Schaltflächen zum Abrufen und Festlegen des Textwerts zuzugreifen.
Syntax
dokumentieren. getElementById ( Elemente )
Hier, ' Elemente ” bezieht sich auf die angegebene Id eines Elements.
Das folgende Beispiel erläutert das diskutierte Konzept.
Beispiel
Fügen Sie zunächst zwei Eingabetypfelder und separate Schaltflächen zum Abrufen und Festlegen der Eingabetextwerte mit dem „ anklicken ” Ereignisse, die auf die angegebenen Funktionen zugreifen:
< Schaltfläche anklicken = 'getText()' > Wert erhalten Taste >
< Schaltfläche anklicken = 'getAndSetText()' > Wert einstellen Taste >
< Eingabetyp = 'Text' Ich würde = 'Text setzen' Name = 'Text setzen' anklicken = 'this.value = '' ' />
Holen Sie sich dann den Wert des Eingabefelds mit Hilfe der Methode document.getElementById():
dokumentieren. getElementById ( 'getText' ) . Wert = 'Hier eingeben' ;Deklarieren Sie nun eine Funktion mit dem Namen „ getAndSetText() “. Holen Sie sich hier das Eingabefeld mit dem „ getText ” id und übergebe den Eingabewert an das nächste Eingabefeld mit “ Text setzen ' Ich würde:
Funktion getAndSetText ( ) {war Text setzen = dokumentieren. getElementById ( 'getText' ) . Wert ;
dokumentieren. getElementById ( 'Text setzen' ) . Wert = Text setzen ;
}
Definieren Sie auf ähnliche Weise eine Funktion mit dem Namen „ getText() “. Danach erhalten Sie das Eingabefeld mit „ getText ” id und übergeben Sie den bestimmten Wert an das Warnfeld, um den Eingabetextwert zu erhalten:
Funktion getText ( ) {war getText = dokumentieren. getElementById ( 'getText' ) . Wert ;
Alarm ( getText ) ;
}
Ausgabe
Methode 2: Eingabetextwert in JavaScript mit der Methode document.getElementByClassName() abrufen und festlegen
Das ' getElementByClassName() ” greift mit Hilfe des angegebenen Klassennamens auf ein Element zu. Diese Methode kann in ähnlicher Weise angewendet werden, um auf die Klasse des Eingabefelds und der Schaltflächen zum Eingeben und Setzen des Textwerts zuzugreifen.
Syntax
dokumentieren. getElementsByClassName ( Klassenname )In der obigen Syntax ist das „ Klassenname ” stellt den Klassennamen von Elementen dar.
Beispiel
Ähnlich wie im vorigen Beispiel greifen wir zunächst mit dem „ getText ' Klassenname. Definieren Sie dann eine Funktion mit dem Namen „ getAndSetText() ” und holen Sie sich das angegebene Eingabefeld basierend auf seinem Klassennamen und setzen Sie den Wert im nächsten Eingabefeld:
Funktion getAndSetText ( )
{
war Text setzen = dokumentieren. getElementByClassName ( 'getText' ) . Wert ;
dokumentieren. getElementById ( 'Text setzen' ) . Wert = Text setzen ;
}
Definieren Sie ebenso eine Funktion mit dem Namen „ getText() “, fügen Sie den Klassennamen des ersten Eingabefelds hinzu und übergeben Sie den jeweiligen Wert an das Warnfeld, um den abgerufenen Wert anzuzeigen:
Funktion getText ( ) {war getText = dokumentieren. getElementByClassName ( 'getText' ) . Wert ;
Alarm ( getText ) ;
}
Diese Implementierung ergibt die folgende Ausgabe:
Methode 3: Eingabetextwert in Javascript mit der Methode „document.querySelector()“ abrufen und festlegen
Das ' document.querySelector() “ holt das erste e ging unter das mit dem angegebenen Selektor übereinstimmt, und die Methode addEventListener() kann dem ausgewählten Element eine Ereignisbehandlungsroutine hinzufügen. Diese Methoden können angewendet werden, um die ID des Eingabefelds und der Schaltflächen zu erhalten und einen Ereignishandler darauf anzuwenden.
Syntax
dokumentieren. querySelector ( CSS-Selektoren )Hier, ' CSS-Selektoren “ beziehen sich auf einen oder mehrere CSS-Selektoren.
Sehen Sie sich das folgende Beispiel an.
Beispiel
Fügen Sie zunächst Eingabetypen mit ihren Platzhalterwerten und Schaltflächen zum Abrufen und Festlegen der Eingabetextwerte hinzu:
< Schaltflächen-ID = 'erhalten' > ERHALTEN Taste >
< Eingabetyp = 'Text' Ich würde = 'Eingabesatz' Platzhalter = 'Wert einstellen' >
< Schaltflächen-ID = 'einstellen' > EINSTELLEN Taste >
Rufen Sie als Nächstes die hinzugefügten Eingabefelder und Schaltflächen mit dem „ document.querySelector() ' Methode:
lass buttonGet = dokumentieren. querySelector ( '#erhalten' ) ;lass buttonSet = dokumentieren. querySelector ( '#einstellen' ) ;
lass getInput = dokumentieren. querySelector ( '#input-get' ) ;
setInput lassen = dokumentieren. querySelector ( '#input-set' ) ;
Ergebnis lassen = dokumentieren. querySelector ( '#Ergebnis' ) ;
Fügen Sie dann einen Ereignishandler mit dem Namen „ klicken ” für beide Schaltflächen, um die Werte zu erhalten bzw. einzustellen:
SchaltflächeGet. addEventListener ( 'klicken' , ( ) => {Ergebnis. innerText = getInput. Wert ;
} ) ;
SchaltflächeSet. addEventListener ( 'klicken' , ( ) => {
getInput. Wert = setEingabe. Wert ;
} ) ;
Ausgabe
Wir haben die einfachsten Methoden zum Abrufen und Festlegen von Eingabetextwerten in JavaScript besprochen.
Fazit
Verwenden Sie zum Abrufen und Festlegen des Eingabetextwerts in JavaScript das „ document.getElementById() “Methode oder die
„ document.getElementByClassName() ”-Methode für den Zugriff auf das angegebene Eingabefeld und die Schaltflächen basierend auf ihren IDs oder Klassennamen und legt dann ihre Werte fest. Außerdem ist die „ document.querySelector() “ kann auch zum Abrufen und Festlegen von Eingabetextwerten in JavaScript verwendet werden. In diesem Blog wurden die Methoden zum Abrufen und Festlegen von Eingabetextwerten in JavaScript erläutert.