Cómo asignar valor al cuadro de texto usando JavaScript

A veces, es posible que deba establecer un valor de cuadro de texto basado en cualquier evento. Puede hacerlo agregando un elemento de cuadro de texto de entrada en el archivo HTML y configurando su valor de atributo basado en el requisito. JavaScript tiene métodos predefinidos que pueden ser útiles para el propósito establecido.

Esta publicación definirá el procedimiento para asignar valor al cuadro de texto usando JavaScript.

Cómo asignar valor al cuadro de texto usando JavaScript?

Para asignar valor al cuadro de texto, use los siguientes métodos:

• Uso del método setattribute ()
• Uso de la propiedad Valor de texto

Veamos el funcionamiento de estos métodos por separado!

Método 1: Asignar valor a TextBox usando el método setattribute ()

El "setAttribute ()El método se utiliza para asignar un valor al cuadro de texto. Se utiliza para agregar o establecer un atributo a un determinado elemento y darle un valor. Este método toma dos parámetros como argumento, y ambos son obligatorios.

Sintaxis

Siga la sintaxis mencionada a continuación para el método setattribute ():

setAttribute (AttributeName, AttributeValue);

Aquí, "valor de atributo"Es el valor del atributo cuyo nombre se especifica.

Ejemplo

Primero crearemos un encabezado y un campo de entrada con el valor predeterminado "TextoValor del marcador de posición. A continuación, agregue un botón que invocará el método "myFunction ()" cuando se haga clic:

Haga clic en el botón para ver el valor predeterminado del campo de texto.

Hacer clic

En el archivo JS, defina una función llamada "myFunction ()"Y acceda al cuadro de texto usando"getElementById ()"Método y luego establecer el valor con la ayuda de"setAttribute ()" método:

función myFunction ()
documento.getElementById ("mytext").setAttribute ('valor', 'linuxhint');

Se puede ver desde la salida que cuando se hace clic en el botón, el valor del cuadro de texto se establece como "Linuxhint":

Veamos el siguiente procedimiento para asignar valor al cuadro de texto.

Método 2: Asignar valor al cuadro de texto utilizando la propiedad Valor de texto

Hay otro enfoque para asignar valor al cuadro de texto, que es el "valor"Propiedad del texto. En este enfoque, solo debe asignar el valor al cuadro de texto utilizando la propiedad de valor.

Sintaxis

Use la siguiente sintaxis para asignar valor a un cuadro de texto utilizando la propiedad de valor del elemento de texto:

valor = "texto";

Ejemplo

Aquí, asignaremos el valor al cuadro de texto ya creado en el ejemplo anterior. Para hacerlo, acceda al cuadro de texto en myFunction () y luego asigne el valor requerido al cuadro de texto utilizando el "valor" propiedad:

función myFunction ()
documento.getElementById ("mytext").valor = "Linuxhint";

Como puede ver la salida correctamente, asigne el valor al cuadro de texto:

Hemos reunido los enfoques más simples para asignar valor al cuadro de texto usando JavaScript.

Conclusión

Para asignar valor al cuadro de texto usando JavaScript, puede usar el método predefinido de JavaScript llamado Método SetatTribute () o la propiedad Value del elemento de texto. Ambos enfoques funcionan de manera eficiente para asignar valor al cuadro de texto. Puede seleccionar uno de ellos según sus requisitos. En esta publicación, hemos discutido los enfoques para asignar el valor al cuadro de texto utilizando JavaScript con ejemplos detallados.