Cómo obtener el valor del campo de entrada de texto usando JavaScript?
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.
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.
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.