Come impostare il valore di un campo di input in JavaScript?

Manipolazioni DOM che utilizza JavaScript consente al programmatore di modificare gli elementi o persino gli attributi degli elementi di una pagina Web HTML. Modificare il valore del campo di input non è diverso. Esistono due approcci per modificare il valore di un campo di input usando JavaScript. Questi sono:

• Assegnazione dell'attributo del valore di un elemento Qualche valore utilizzando l'operatore di assegnazione "="
• Usando il SetAttribute () funzione.

Saltiamo solo all'interno della dimostrazione di entrambi questi metodi, ma prima di allora abbiamo bisogno di un modello HTML con cui lavorare.

Impostazione di una pagina Web HTML

Nel file HTML, aggiungi semplicemente le seguenti righe per creare un nuovo campo di input di testo con l'ID "TextFeild1"

Quando eseguiamo il programma, andiamo al seguente output sul nostro browser:

Possiamo vedere il nostro campo di input sullo schermo.

Metodo 1: assegna l'attributo del valore un valore direttamente

Per questo, aggiungeremo per la prima volta le seguenti righe nel nostro file HTML:

Cambiare valore

Questo aggiungerà un nuovo pulsante sotto il nostro campo di testo. E abbiamo allegato una funzione al clic su questo pulsante chiamato come Cambiaggio ():

Nel file di script, aggiungeremo la seguente funzionalità per far funzionare questo pulsante:

funzione changeValue ()
TextField = Document.getElementById ("TextField1");
campo di testo.value = "Method 1";

Prima stiamo ottenendo un riferimento al nostro campo di testo usando il documento.getElementById (). Successivamente, utilizziamo l'operatore DOT per ottenere l'attributo del valore e assegniamo direttamente un valore stringa. Facendo clic su questo pulsante, otteniamo il seguente output:

Come puoi vedere, siamo stati in grado di modificare il valore del campo di input usando l'operatore dot e l'attributo del valore.

Metodo 2: usando la funzione setAttribute ()

Per questo, aggiungeremo un nuovo pulsante proprio sotto il pulsante precedente usando le seguenti righe nel file HTML:

Modifica per setAttribute ()

Come puoi vedere, abbiamo allegato questo pulsante con una funzione chiamata come setAttributeChange (). Dopo aver caricato questo HTML, otteniamo la seguente pagina web sul nostro browser:

Quindi entriamo all'interno del file di script e definiamo questo setAttributeChange () La funzione di modifica come segue:

funzione setAttributeChange ()
TextField = Document.getElementById ("TextField1");
campo di testo.setAttribute ("valore", "metodo 2");

Nella prima riga, stiamo ottenendo un riferimento al campo di testo usando il documento.getElementById () funzione. Dopodiché, stiamo usando il OPERATORE DOT e il setAttribute () funzione per scegliere l'attributo "valore"E poi dargli un valore di stringa come"Metodo 2". Facendo clic sul pulsante, otteniamo il seguente output:

Come puoi vedere, siamo stati in grado di modificare il valore del campo di input usando la funzione setAttribute ().

Conclusione

Con l'aiuto delle manipolazioni DOM, JavaScript ci consente di modificare facilmente l'attributo del valore di un campo di input all'interno di una pagina Web HTML. Per questo, abbiamo due approcci diversi che ci portano allo stesso risultato. Abbiamo l'elemento.funzione setAttribute () che ci consente di scegliere un attributo e dargli un valore di nostra scelta. In secondo luogo, abbiamo la possibilità di selezionare l'attributo usando "Operatore DOT"E quindi assegnare quell'attributo qualsiasi valore utilizzando l'operatore di assegnazione"=."