Cómo obtener el valor del campo de entrada de texto usando JavaScript?

JavaScript puede interactuar con diferentes páginas web para proporcionar servicios del servidor y del lado del cliente. El propósito de Javascript es proporcionar elementos interactivos en las páginas web para involucrar a los usuarios. Estos elementos interactivos incluyen un estilo dinámico, ingresar el valor, obtener valor de los formularios, etc.

En esta publicación, se realiza una implementación práctica de cómo obtener el valor del texto de los campos de entrada utilizando JavaScript.

Hay diferentes formas de adquirir el valor del campo de entrada utilizando JavaScript. Manteniéndolos a la vista, los resultados de la publicación son:

• • Usar el GetElementByid en JavaScript
  • Usar getElementsByClassName en JavaScript

Método 1: Uso del GetElementByID en JavaScript

En JavaScript, el GetElementByid El método se utiliza para obtener el valor del cuadro de texto de entrada con un atributo de ID. Este método se emplea para devolver una salida por un valor especificado. Devuelve el valor nulo si el elemento no está presente aquí. La mayoría de los usuarios lo utilizan para leer y modificar elementos HTML. La sintaxis del GetElementByid es la siguiente:

Sintaxis

documento.getElementById ("inputID").valor;

En esta sintaxis, la GetElementByid El método extrae el valor al pasar el mismo atributo de identificación "titidid".

Código

Un ejemplo de obtener el valor del campo de texto de entrada.

presiona el botón

En el código anterior:

• • Primero, el campo de entrada se usa para tomar la entrada del usuario.
  • Después de eso, el getInputValue () la función se utiliza para adquirir la propiedad de valor utilizando GetElementByid.valor.
  • Se crea un nuevo botón que tiene la función getInputValue () en su evento OnClick.

Producción

Después de ejecutar el código, aparecerá un cuadro de texto y un botón. Cuando escribe alguna palabra en el cuadro de texto y se presiona el botón, aparecerá un cuadro de alerta que contiene la palabra/texto escrita en el cuadro de texto antes. La ventana emergente de alerta sería como se muestra a continuación:

Método 2: Uso de GetElementsByClassName en JavaScript

En JavaScript, otro método conocido como GetElementsByClassName se usa para obtener el valor del campo de entrada de texto. Devuelve el conjunto de elementos especificados por el nombre de la clase. El getElementsByClassName () El método se llama utilizando el elemento del documento. Busca todo el documento y ofrece la salida de todos los elementos infantiles presentes en el documento. La sintaxis para usar este método se proporciona a continuación:

documento.getElementsByClassName ("InputClass") [0].valor;

La sintaxis se describe como:

• • Clase de entrada: representa el nombre de la clase.
  • [0]: Representa que si no hay ningún elemento coincidente aquí, entonces regrese indefinido.

Código

Usando el método GetElementsByClassName y mostrarlo.

Obtener valor

El código anterior representa que Clase de entrada se especifica como un nombre de clase del campo de texto. Después de eso, el getInputValue () Se utiliza la función, en la que getElementsByClassName () se llama usar el documento elemento especificando el nombre de clase "Clase de entrada".

Producción

En la pantalla anterior, el valor "Minhal"Se coloca dentro del texto archivado.

Después de presionar el Obtener valor botón, el valor se almacena y se muestra como un mensaje de alerta en la ventana emergente. De esta manera, el getElementsByClassName () El método se puede utilizar para obtener el valor del campo de entrada de texto usando JavaScript.

Conclusión

En JavaScript, el getElementById () y getElementsByClassName () Se utilizan métodos para obtener el valor del campo de entrada de texto. En el getElementById () Método, el valor del cuadro de texto de entrada se extrae con un atributo de identificación. Mientras que el getElementsByClassName () El método devuelve el conjunto de elementos especificados por el nombre de la clase. Ambos métodos están respaldados por navegadores avanzados, que incluyen Chrome, Opera, Safari, etc. Ha aprendido a extraer el valor del campo de entrada de texto con Javascript.