Aquest escrit mostrarà els mètodes per obtenir i establir valors de text d'entrada en JavaScript.
Com obtenir i establir el valor del text d'entrada a JavaScript?
Per obtenir i establir el valor del text d'entrada a JavaScript, utilitzeu:
- “ getElementById() ” mètode
- “ getElementByClassName() ” mètode
- “ querySelector() ” mètode
Revisa cadascun dels mètodes esmentats un per un!
Mètode 1: obtenir i establir el valor del text d'entrada a JavaScript mitjançant el mètode document.getElementById()
El ' getElementById() ” accedeix a un element amb l'identificador especificat. Aquest mètode es pot aplicar per accedir als identificadors dels camps d'entrada i botons per obtenir i establir el valor del text.
Sintaxi
document. getElementById ( elements )
Aquí, ' elements ” fa referència a l'identificador especificat d'un element.
L'exemple següent explica el concepte discutit.
Exemple
En primer lloc, inclou dos camps de tipus d'entrada i botons separats per obtenir i configurar els valors de text d'entrada amb el ' fent clic ” esdeveniments que accediran a les funcions especificades:
< botó al fer clic = 'getText()' > Obteniu valor botó >
< botó al fer clic = 'getAndSetText()' > Establir valor botó >
< tipus d'entrada = 'text' id = 'setText' nom = 'setText' fent clic = 'this.value = ''' />
A continuació, obteniu el valor del camp d'entrada amb l'ajuda del mètode document.getElementById():
document. getElementById ( 'getText' ) . valor = 'Introdueix aquí' ;Ara, declara una funció anomenada ' getAndSetText() ”. Aquí, obteniu el camp d'entrada amb el ' getText ” id i passa el valor d'entrada al següent camp d'entrada que tingui “ setText ” id:
funció getAndSetText ( ) {era setText = document. getElementById ( 'getText' ) . valor ;
document. getElementById ( 'setText' ) . valor = setText ;
}
De la mateixa manera, definiu una funció anomenada ' getText() ”. Després d'això, obteniu el camp d'entrada amb ' getText ” id i passeu el valor particular al quadre d'alerta per obtenir el valor de text d'entrada:
funció getText ( ) {era getText = document. getElementById ( 'getText' ) . valor ;
alerta ( getText ) ;
}
Sortida
Mètode 2: obtenir i establir el valor del text d'entrada a JavaScript mitjançant el mètode document.getElementByClassName()
El ' getElementByClassName() ” El mètode accedeix a un element amb l'ajuda del nom de classe especificat. Aquest mètode, de la mateixa manera, es pot aplicar per accedir a la classe del camp d'entrada i als botons per introduir i configurar el valor del text.
Sintaxi
document. getElementsByClassName ( nom de classe )En la sintaxi anterior, el ' nom de classe ” representa el nom de classe dels elements.
Exemple
De manera similar a l'exemple anterior, primer accedirem al primer camp d'entrada amb el ' getText ” nom de la classe. A continuació, definiu una funció anomenada ' getAndSetText() ” i obteniu el camp d'entrada especificat en funció del seu nom de classe i establiu el valor al camp d'entrada següent:
funció getAndSetText ( )
{
era setText = document. getElementByClassName ( 'getText' ) . valor ;
document. getElementById ( 'setText' ) . valor = setText ;
}
De la mateixa manera, definiu una funció anomenada “ getText() ”, afegiu el nom de classe del primer camp d'entrada i passeu el valor particular al quadre d'alerta per mostrar el valor obtingut:
funció getText ( ) {era getText = document. getElementByClassName ( 'getText' ) . valor ;
alerta ( getText ) ;
}
Aquesta implementació donarà la següent sortida:
Mètode 3: obteniu i definiu el valor del text d'entrada a Javascript mitjançant el mètode 'document.querySelector()'
El ' document.querySelector() ” agafa el primer e baixar que coincideix amb el selector especificat i el mètode addEventListener() pot afegir un controlador d'esdeveniments a l'element seleccionat. Aquests mètodes es poden aplicar per obtenir l'identificador del camp d'entrada i els botons i aplicar-hi un controlador d'esdeveniments.
Sintaxi
document. querySelector ( Selectors CSS )Aquí, ' Selectors CSS ” es refereix a un o més selectors CSS.
Mireu l'exemple següent.
Exemple
En primer lloc, inclou els tipus d'entrada amb els seus valors de marcador de posició i botons per obtenir i configurar els valors del text d'entrada:
< identificador del botó = 'aconseguir' > ACONSEGUIR botó >
< tipus d'entrada = 'text' id = 'conjunt d'entrada' posseïdor del lloc = 'Estableix el valor' >
< identificador del botó = 'conjunt' > CONJUNT botó >
A continuació, obteniu els camps i botons d'entrada afegits amb el botó ' document.querySelector() ” mètode:
deixar botó Get = document. querySelector ( '#aconseguir' ) ;deixar buttonSet = document. querySelector ( '#conjunt' ) ;
deixa getInput = document. querySelector ( '#input-get' ) ;
deixar setInput = document. querySelector ( '#conjunt d'entrada' ) ;
deixar resultat = document. querySelector ( '#resultat' ) ;
A continuació, inclou un gestor d'esdeveniments anomenat ' feu clic ” per als dos botons per obtenir i establir els valors, respectivament:
botó Obtenir. addEventListener ( 'clic' , ( ) => {resultat. text interior = getInput. valor ;
} ) ;
buttonSet. addEventListener ( 'clic' , ( ) => {
getInput. valor = setInput. valor ;
} ) ;
Sortida
Hem parlat dels mètodes més senzills per obtenir i configurar el valor del text d'entrada a JavaScript.
Conclusió
Per obtenir i establir el valor del text d'entrada a JavaScript, utilitzeu el ' document.getElementById() ” mètode o el
“ document.getElementByClassName() ” mètode per accedir al camp d'entrada i als botons especificats en funció dels seus identificadors o nom de classe i, a continuació, establir els seus valors. A més, el “ document.querySelector() ” també es pot utilitzar per obtenir i establir valors de text d'entrada en JavaScript. Aquest bloc va explicar els mètodes per obtenir i establir valors de text d'entrada en JavaScript.