Come assegnare il valore alla casella di testo usando JavaScript

A volte, potrebbe essere necessario impostare un valore di testo in base a qualsiasi evento. È possibile farlo aggiungendo un elemento di testo di input nel file HTML e impostando il valore dell'attributo in base al requisito. JavaScript ha metodi predefiniti che possono essere utili allo scopo dichiarato.

Questo post definirà la procedura per l'assegnazione del valore alla casella di testo utilizzando JavaScript.

Come assegnare il valore alla casella di testo usando JavaScript?

Per l'assegnazione del valore alla casella di testo, utilizzare i seguenti metodi:

• Utilizzo del metodo setAttribute ()
• Utilizzo della proprietà del valore di testo

Diamo un'occhiata al funzionamento di questi metodi separatamente!

Metodo 1: assegnare il valore alla casella di testo utilizzando il metodo setAttribute ()

IL "setAttribute ()"Il metodo viene utilizzato per assegnare un valore alla casella di testo. Viene utilizzato per aggiungere o impostare un attributo su un determinato elemento e dargli un valore. Questo metodo prende due parametri come argomento ed entrambi sono obbligatori.

Sintassi

Seguire la sintassi di seguito per setAttribute () Metodo:

setAttribute (attributeName, attributeValue);

Qui, "attributo"È il valore dell'attributo il cui nome è specificato.

Esempio

Per prima cosa creeremo un'intestazione e un campo di input con il valore predefinito "Testo"Valore segnaposto. Quindi, aggiungi un pulsante che invocherà il metodo "MyFunction ()" quando viene cliccato:

Fai clic sul pulsante per visualizzare il valore predefinito del campo di testo.

Clic

Nel file JS, definire una funzione denominata "myFunction ()"E accedi alla casella di testo utilizzando"getElementById ()"Metodo e quindi impostare il valore con l'aiuto di"setAttribute ()" metodo:

funzione myFunction ()
documento.getElementById ("MyText").setAttribute ('Value', 'LinuxHint');

Si può vedere dall'output che quando si fa clic sul pulsante, il valore della casella di testo è impostato come "Linuxhint":

Vediamo la procedura successiva per l'assegnazione del valore alla casella di testo.

Metodo 2: assegnare il valore alla casella di testo utilizzando la proprietà Valore di testo

C'è un altro approccio per l'assegnazione del valore alla casella di testo, che è il "valore"Proprietà del testo. In questo approccio, devi solo assegnare il valore alla casella di testo utilizzando la proprietà Value.

Sintassi

Utilizzare la seguente sintassi per l'assegnazione del valore a una casella di testo utilizzando la proprietà del valore dell'elemento di testo:

value = "text";

Esempio

Qui, assegneremo il valore alla casella di testo già creata nell'esempio precedente. Per fare ciò, accedere alla casella di testo in myFunction () e quindi assegnare il valore richiesto alla casella di testo usando "valore" proprietà:

funzione myFunction ()
documento.getElementById ("MyText").value = "linuxhint";

Come puoi vedere correttamente l'output, assegna il valore alla casella di testo:

Abbiamo raccolto gli approcci più semplici per l'assegnazione del valore alla casella di testo usando JavaScript.

Conclusione

Per l'assegnazione del valore alla casella di testo utilizzando JavaScript, è possibile utilizzare il metodo predefinito JavaScript chiamato metodo setAttribute () o la proprietà del valore dell'elemento di testo. Entrambi questi approcci funzionano in modo efficiente per assegnare valore alla casella di testo. Puoi selezionarne uno secondo il tuo requisito. In questo post, abbiamo discusso degli approcci per l'assegnazione del valore alla casella di testo usando JavaScript con esempi dettagliati.