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

JavaScript puede interactuar con varias páginas web para proporcionar servicios tanto del lado del servidor como del lado del cliente. El propósito de JavaScript consiste en proporcionar elementos interactivos en las páginas web para atraer a los usuarios. Estos elementos interactivos incluyen estilos dinámicos, ingreso del valor, obtención del valor del formulario, etc. Esta publicación hará una implementación práctica para obtener el valor del texto de los campos de entrada usando JavaScript. Hay varias formas de obtener el valor del campo de entrada usando JavaScript. Teniendo esto en cuenta, los resultados de la publicación son:

• • Usando getElementById en JavaScript
  • Usando getElementsByClassName en JavaScript

Método 1: usar getElementById en JavaScript

En JavaScript, el getElementById El método se utiliza para obtener el valor del campo de texto de entrada con un atributo de ID. Este método se utiliza para devolver una salida con un valor específico. Devuelve el valor nulo si el elemento no existe aquí. La mayoría de los usuarios lo utilizan para leer y modificar elementos HTML. La sintaxis de getElementById es la siguiente:
sintaxis
documento.getElementById(«inputId»).value; En esta sintaxis, el getElementById El método extrae el valor pasando el mismo atributo de ID «ID de entrada“.
código

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

botón

En el código de arriba:

• • Primero, el campo de entrada se usa para aceptar la entrada del usuario.
  • Después de eso, el obtenerValorEntrada() La función se utiliza para adquirir la propiedad de valor. 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 una palabra en el cuadro de texto y se presiona el botón, aparece un cuadro de advertencia que contiene la palabra/texto previamente escrito en el cuadro de texto. La ventana emergente de alerta se vería así:

Método 2: usar getElementsByClassName en JavaScript

En JavaScript, otro método se conoce como getElementsByClassName se utiliza para obtener el valor del campo de entrada de texto. Devuelve el conjunto de elementos especificado por el nombre de la clase. Que getElementsByClassName() El método se llama con el elemento del documento. Escanea todo el documento y genera la salida de todos los elementos secundarios que están presentes en el documento. La sintaxis para utilizar este método se proporciona a continuación: document.getElementsByClassName(«inputClass»)[0].Valor; La sintaxis se describe de la siguiente manera:

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

código

Utilice el método y la visualización getElementsByClassName.

obtener valor El código anterior representa esto clase de entrada se especifica como el nombre de clase del campo de texto. Después de eso, el obtenerValorEntrada() función se utiliza en el getElementsByClassName() se llama con el documento Elemento especificando el nombre de la clase «clase de entrada“.

producción

En la pantalla anterior, el valor «Minhal‘ se inserta en el cuadro de texto.

Después de presionar el botón recibir valor , el valor se guarda y se muestra como un mensaje de advertencia en la ventana emergente. De esta manera, el getElementsByClassName() El método se puede usar para obtener el valor del cuadro de entrada de texto usando JavaScript.

Conclusión

En JavaScript, el getElementById() y getElementsByClassName() Los métodos se utilizan para obtener el valor del cuadro de entrada de texto. En el cual getElementById() El método extrae el valor del campo de texto de entrada con un atributo de ID. mientras que la getElementsByClassName() El método devuelve el conjunto de elementos especificado por el nombre de la clase. Ambos métodos son compatibles con navegadores avanzados, incluidos Chrome, Opera, Safari, etc. Ha aprendido a extraer el valor del campo de entrada de texto con él. JavaScript.