Este artículo demostrará los métodos para obtener y establecer valores de texto de entrada en JavaScript.
¿Cómo obtener y establecer el valor del texto de entrada en JavaScript?
Para obtener y establecer el valor del texto de entrada en JavaScript, utilice:
- “ getElementById() ' método
- “ getElementByClassName() ' método
- “ selector de consulta() ' método
¡Revise cada uno de los métodos mencionados uno por uno!
Método 1: Obtener y establecer el valor del texto de entrada en JavaScript utilizando el método document.getElementById()
Los ' getElementById() El método accede a un elemento con el Id especificado. Este método se puede aplicar para acceder a los identificadores de los campos y botones de entrada para obtener y establecer el valor del texto.
Sintaxis
documento. getElementById ( elementos )
Aquí, ' elementos ” se refiere al Id especificado de un elemento.
El siguiente ejemplo explica el concepto discutido.
Ejemplo
En primer lugar, incluya dos campos de tipo de entrada y botones separados para obtener y configurar los valores de texto de entrada con el ' al hacer clic ” eventos que accederán a las funciones especificadas:
< botón al hacer clic = 'obtenerTexto()' > Obtenga valor botón >
< botón al hacer clic = 'getAndSetText()' > Valor ajustado botón >
< tipo de entrada = 'texto' identificación = 'establecerTexto' nombre = 'establecerTexto' al hacer clic = 'este.valor = '' ' />
Luego, obtenga el valor del campo de entrada con la ayuda del método document.getElementById():
documento. getElementById ( 'obtenerTexto' ) . valor = 'Ingrese aquí' ;Ahora, declara una función llamada “ getAndSetText() ”. Aquí, busque el campo de entrada con el ' obtenerTexto ” id y pase el valor de entrada al siguiente campo de entrada que tenga “ establecerTexto ' identificación:
función getAndSetText ( ) {estaba establecerTexto = documento. getElementById ( 'obtenerTexto' ) . valor ;
documento. getElementById ( 'establecerTexto' ) . valor = establecerTexto ;
}
Del mismo modo, defina una función llamada “ obtenerTexto() ”. Después de eso, obtenga el campo de entrada con ' obtenerTexto ” id y pase el valor particular al cuadro de alerta para obtener el valor del texto de entrada:
función obtenerTexto ( ) {estaba obtenerTexto = documento. getElementById ( 'obtenerTexto' ) . valor ;
alerta ( obtenerTexto ) ;
}
Producción
Método 2: Obtener y establecer el valor del texto de entrada en JavaScript mediante el método document.getElementByClassName()
Los ' getElementByClassName() El método accede a un elemento con la ayuda del nombre de clase especificado. Este método, de manera similar, se puede aplicar para acceder a la clase del campo de entrada y los botones para ingresar y configurar el valor del texto.
Sintaxis
documento. getElementsByClassName ( nombre de la clase )En la sintaxis anterior, el ' nombre de la clase ” representa el nombre de clase de los elementos.
Ejemplo
Similar al ejemplo anterior, primero accederemos al primer campo de entrada con el “ obtenerTexto ' nombre de la clase. Luego, defina una función llamada “ getAndSetText() ” y obtenga el campo de entrada especificado en función de su nombre de clase y establezca el valor en el siguiente campo de entrada:
función getAndSetText ( )
{
estaba establecerTexto = documento. getElementByClassName ( 'obtenerTexto' ) . valor ;
documento. getElementById ( 'establecerTexto' ) . valor = establecerTexto ;
}
Del mismo modo, defina una función llamada “ obtenerTexto() ”, agregue el nombre de clase del primer campo de entrada y pase el valor particular al cuadro de alerta para mostrar el valor obtenido:
función obtenerTexto ( ) {estaba obtenerTexto = documento. getElementByClassName ( 'obtenerTexto' ) . valor ;
alerta ( obtenerTexto ) ;
}
Esta implementación producirá el siguiente resultado:
Método 3: Obtener y establecer el valor del texto de entrada en Javascript usando el método 'document.querySelector()'
Los ' documento.querySelector() ” recupera la primera e bajó que coincida con el selector especificado, y el método addEventListener() puede agregar un controlador de eventos al elemento seleccionado. Estos métodos se pueden aplicar para obtener la identificación del campo de entrada y los botones y aplicarles un controlador de eventos.
Sintaxis
documento. selector de consulta ( Selectores de CSS )Aquí, ' Selectores de CSS ” se refieren a uno o más selectores de CSS.
mira el siguiente ejemplo.
Ejemplo
En primer lugar, incluya tipos de entrada con sus valores de marcador de posición y botones para obtener y configurar los valores de texto de entrada:
< identificación del botón = 'obtener' > OBTENER botón >
< tipo de entrada = 'texto' identificación = 'conjunto de entrada' marcador de posición = 'Valor ajustado' >
< identificación del botón = 'establecer' > ESTABLECER botón >
A continuación, obtenga los campos de entrada y los botones agregados usando el botón ' documento.querySelector() ' método:
Let buttonObtener = documento. selector de consulta ( '#obtener' ) ;Let buttonSet = documento. selector de consultas ( '#establecer' ) ;
dejar getInput = documento. selector de consultas ( '#entrada-obtener' ) ;
dejar establecer entrada = documento. selector de consulta ( '# conjunto de entrada' ) ;
deja que resulte = documento. selector de consulta ( '#resultado' ) ;
Luego, incluya un controlador de eventos llamado ' hacer clic ” para que ambos botones obtengan y establezcan los valores, respectivamente:
botón Obtener. agregarEventListener ( 'hacer clic' , ( ) => {resultado. textointerno = obtenerEntrada. valor ;
} ) ;
botónEstablecer. agregarEventListener ( 'hacer clic' , ( ) => {
obtenerEntrada. valor = establecer entrada. valor ;
} ) ;
Producción
Hemos discutido los métodos más simples para obtener y establecer el valor del texto de entrada en JavaScript.
Conclusión
Para obtener y establecer el valor del texto de entrada en JavaScript, utilice el ' documento.getElementById() ” método o el
“ documento.getElementByClassName() ” para acceder al campo de entrada y los botones especificados en función de sus ID o nombre de clase y luego establecer sus valores. Además, el “ documento.querySelector() ” también se puede utilizar para obtener y establecer valores de texto de entrada en JavaScript. Este blog explicó los métodos para obtener y establecer valores de texto de entrada en JavaScript.