Trabajo con campos de texto en JavaScript

Ahora aprenderemos a obtener texto de los usuarios de nuestro sitio. Para esto en HTML existe una etiqueta especial input, que representa un campo de texto para ingresar datos.

html<input>

Esta etiqueta tiene un atributo especial value, que establece el texto inicial que estará escrito en el input al cargar la página:

html<input value="text">

El usuario de nuestro sitio después de cargar la página puede cambiar el texto del input. En este caso, si tenemos una variable que contiene una referencia a este input, la propiedad value de esta variable siempre contendrá el valor actual del texto del input.

Probemos en la práctica. Supongamos que tenemos un input con el atributo value:

html<input id="elem" value="text">

Obtengamos la referencia a este input en una variable:

javascriptlet elem = document.querySelector('#elem');

Y ahora mostremos en pantalla el texto actual del input:

javascriptconsole.log(elem.value);

Y ahora cambiemos el texto del input por otro:

javascriptelem.value = 'new text';