Cómo obtener el valor de entrada en JavaScript

JavaScript ofrece una variedad de funcionalidades para crear interfaces interactivas. Se puede recuperar el valor de cualquier elemento utilizando métodos JavaScript. El valor de entrada se puede imprimir en algún lugar de la página web o se puede obtener como un mensaje de alerta. Todo esto es posible con la ayuda de JavaScript. Aquí, describiremos el Javascript Soporte para obtener el valor de entrada de cualquier elemento. Se esperan los siguientes resultados de aprendizaje:

• Cómo obtener el valor de entrada en JavaScript
• Obtenga el valor de entrada usando el método getElementById ()
• Obtenga el valor de entrada utilizando el método getElementsByClassName ()
• Obtener el valor de entrada usando el método QuerySelector ()

Cómo obtener el valor de entrada en JavaScript

JavaScript proporciona dos propiedades para obtener los valores de entrada al emplear el GetElementByid, GetElementsByClassName, y queryselector métodos. Estos métodos extraen la cadena, así como el valor numérico para mostrar la información del usuario. Todos los navegadores famosos admiten ambas propiedades. El valor La propiedad devuelve la información del usuario. Además, la propiedad es útil para asignar cualquier valor específico para la visualización en la ventana del navegador.

La sintaxis de estos métodos se establece a continuación.

Sintaxis de GetElementByid

documento.getElementById ("textid").valor = "text_message";

Sintaxis de GetElementsByClassName

documento.GetElementsByClassName ("Clname").valor ;

Sintaxis de Queryselector

documento.QuerySelector ("ID1").valor

La descripción de los parámetros anteriores es el siguiente:

• Textid: denota la identificación de un elemento.
• mensaje de texto: representa el mensaje a mostrar.
• Clname: especificar el nombre de la clase.
• ID1: representa la identificación o clase de un elemento HTML.

Ejemplo 1: Obtenga el valor de entrada usando el método getElementById ()

Se considera otro ejemplo para obtener el valor de entrada en JavaScript.

Html

Un ejemplo para obtener el valor del campo de texto

Mensaje favorito:

Presione el botón para mostrar el valor del texto.

Botón de visualización

El código HTML obtiene el valor de entrada "Bienvenido a JavaScript"Al presionar el"Botón de visualización". El botón se adjunta con el Display_fn () método.

Javascript

función display_fn ()
var a = documento.GetElementById ("MTXT").valor;
documento.getElementById ("demo").innerhtml = a;

Un método Display_fn () se emplea para recuperar el valor del texto en el archivo HTML mediante GetElementByid.

Ejemplo 2: Obtenga el valor de entrada usando el método GetElementsByClassName ()

Se considera un ejemplo para obtener el valor numérico del campo de entrada en JavaScript.

Archivo html

Un ejemplo para obtener el valor numérico del campo

Obtener valor numérico

En este código, la descripción es la siguiente:

• La clase inPCLS se usa para ingresar el número numérico.
• Después de eso, se adjunta un botón que está asociado con el getInpval () método.
• Al final, un archivo JavaScript prueba.js está vinculado asignando la fuente SRC variable.

Javascript

función getInpval ()
Let inPval = document.getElementsByClassName ("INPCLS") [0].valor;
alerta (inPval);

En el archivo JavaScript:

• Un método getInpval () se usa para extraer el valor del Html archivo.
• La extracción es realizada por GEtelementByClassName ("INPCLS") [0].valor.
• Al final, se genera un mensaje de alerta al pasar el inpval variable.

Producción

La salida muestra que el usuario primero ingresa cualquier número. Después de eso, se genera un cuadro de alerta presionando el "Obtener valor numérico" botón.

Ejemplo 3: Obtener el valor de entrada usando el método QuerySelector ()

Se considera que otro ejemplo obtiene el valor utilizando el QuerySelector () método.

Código

Obtener valor usando el selector de consultas

Botón de visualización

En este código, la descripción es la siguiente:

• En primer lugar, un caja de texto y un botón están unidos con y Etiquetas respectivamente.
• El botón está asociado con el getValueInput () método.
• En este método, QuerySelector () se emplea para extraer el valor del caja de texto y mostrarlo usando val1.

Producción

La salida muestra el mensaje "Javascript"Al presionar el botón en el navegador.

Conclusión

El GetElementByid, GetElementsByClassName, y QuerySelector () Los métodos se utilizan para obtener el valor de entrada en JavaScript. Los primeros dos métodos recuperan los elementos utilizando el nombre de ID y la clase. Mientras que el tercer método puede obtener los elementos usando una ID, así como un nombre de clase. Aquí, ha aprendido a usar estos tres métodos para obtener valores de entrada en JavaScript.