Cómo establecer el valor de un campo de entrada en JavaScript?

Las manipulaciones DOM utilizando JavaScript permiten al programador cambiar los elementos o incluso los atributos de los elementos de una página web HTML. Cambiar el valor del campo de entrada no es diferente. Hay dos enfoques para cambiar el valor de un campo de entrada usando JavaScript. Estos son:

• Asignando el atributo de valor de un elemento algún valor utilizando el operador de asignación "="
• Mediante el uso del SetAttribute () función.

Simplemente saltemos dentro de la demostración de ambos métodos, pero antes de eso, necesitamos una plantilla HTML para trabajar con.

Configuración de una página web HTML

En el archivo HTML, simplemente agregue las siguientes líneas para crear un nuevo campo de entrada de texto con la ID "TextFeild1"

Cuando ejecutamos el programa, vamos a la siguiente salida en nuestro navegador:

Podemos ver nuestro campo de entrada en la pantalla.

Método 1: Asigne el atributo de valor algún valor directamente

Para esto, primero agregaremos las siguientes líneas en nuestro archivo HTML:

Valor de cambio

Esto agregará un nuevo botón debajo de nuestro campo de texto. Y hemos adjuntado una función en el clic en este botón llamado como valor de cambio():

En el archivo de script, vamos a agregar la siguiente funcionalidad para que este botón funcione:

función ChangeValue ()
textfield = documento.getElementById ("TextField1");
campo de texto.valor = "método 1";

Primero obtenemos una referencia a nuestro campo de texto utilizando el documento.getElementById (). Después de eso, usamos el operador DOT para obtener el atributo de valor y asignarlo directamente un valor de cadena. Al hacer clic en este botón, obtenemos la siguiente salida:

Como puede ver, pudimos cambiar el valor del campo de entrada usando el operador DOT y el atributo de valor.

Método 2: usando la función setattribute ()

Para esto, vamos a agregar un nuevo botón justo debajo del botón anterior usando las siguientes líneas en el archivo HTML:

Cambiar por setAttribute ()

Como puede ver, hemos adjuntado este botón con una función llamada setAtTributEchange (). Al cargar este HTML, obtenemos la siguiente página web en nuestro navegador:

Luego nos dirigimos dentro del archivo de script y definimos esto setAtTributEchange () Cambiar la función de la siguiente manera:

función setatTributEchange ()
textfield = documento.getElementById ("TextField1");
campo de texto.setAttribute ("valor", "método 2");

En la primera línea, estamos recibiendo una referencia al campo de texto utilizando el documento.getElementById () función. Después de eso, estamos usando el operador de puntos y el setAttribute () función para elegir el atributo "valor"Y luego dale un valor de cadena como"Método 2". Al hacer clic en el botón, obtenemos la siguiente salida:

Como puede ver, pudimos cambiar el valor del campo de entrada usando la función setattribute ().

Conclusión

Con la ayuda de las manipulaciones DOM, JavaScript nos permite cambiar fácilmente el atributo de valor de un campo de entrada dentro de una página web HTML. Para esto, tenemos dos enfoques diferentes que nos llevan al mismo resultado. Tenemos el elemento.función setattribute () que nos permite elegir un atributo y darle algún valor de nuestra elección. En segundo lugar, tenemos la opción de seleccionar el atributo utilizando el "operador de puntos"Y luego asigne ese atributo cualquier valor utilizando el operador de asignación"=."