Cómo asignar valor a un cuadro de texto usando JavaScript

Como Asignar Valor A Un Cuadro De Texto Usando Javascript



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

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

¿Cómo asignar valor a un cuadro de texto usando JavaScript?

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







¡Veamos el funcionamiento de estos métodos por separado!



Método 1: Asignar valor al cuadro de texto usando el método setAttribute()

Los ' establecerAtributo() 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():

establecer atributo ( atributoNombre, atributoValor ) ;

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 ' Texto ” valor de marcador de posición. A continuación, agregue un botón que invocará el método 'myFunction()' cuando se haga clic en él:

< h5 > Haga clic en el botón para ver el defecto valor del campo de texto. h5 >

< tipo de entrada = 'texto' identificación = 'mi texto' marcador de posición = 'Texto' >

< botón al hacer clic = 'miFuncion()' > Hacer clic botón >

En el archivo JS, defina una función llamada ' miFunción() ” y acceda al cuadro de texto usando “ getElementbyId() ” método y luego establezca el valor con la ayuda de “ establecerAtributo() ' método:

función miFunción ( ) {

documento. getElementById ( 'mi texto' ) . establecer atributo ( 'valor' , 'Pista de Linux' ) ;

}

Se puede ver en la salida que cuando se hace clic en el botón, el valor del cuadro de texto se establece como ' Sugerencia de Linux ”:

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

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

Hay otro enfoque para asignar valor al cuadro de texto, que es el ' valor ” propiedad del texto. En este enfoque, solo tiene que asignar el valor al cuadro de texto usando la propiedad de valor.

Sintaxis

Use la siguiente sintaxis para asignar valor a un cuadro de texto usando 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 usando el ' valor ' propiedad:

función miFunción ( ) {

documento. getElementById ( 'mi texto' ) . valor = 'Pista de Linux' ;

}

Como puede ver el resultado con éxito, 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 de valor 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 necesidades. En esta publicación, hemos discutido los enfoques para asignar el valor al cuadro de texto usando JavaScript con ejemplos detallados.