Come ottenere il valore di input in JavaScript

JavaScript offre una varietà di funzionalità per creare interfacce interattive. Si può recuperare il valore di qualsiasi elemento usando i metodi JavaScript. Il valore di input può essere stampato da qualche parte nella pagina web oppure può essere ottenuto come messaggio di avviso. Tutto ciò è possibile con l'aiuto di JavaScript. Qui descriveremo il JavaScript supporto per ottenere il valore di input da qualsiasi elemento. Sono previsti i seguenti risultati di apprendimento:

• Come ottenere il valore di input in JavaScript
• Ottieni il valore di input utilizzando il metodo getElementById ()
• Ottieni il valore di input utilizzando il metodo getElementsByClassName ()
• Ottieni il valore di input utilizzando il metodo QuerySelector ()

Come ottenere il valore di input in JavaScript

JavaScript fornisce due proprietà per ottenere i valori di input impiegando il getelementbyid, getElementsByClassName, E QuerySelector metodi. Questi metodi estraggono la stringa e il valore numerico per visualizzare le informazioni dell'utente. Tutti i browser famosi supportano entrambe queste proprietà. IL valore La proprietà restituisce le informazioni dell'utente. Inoltre, la proprietà è utile per assegnare qualsiasi valore specifico per la visualizzazione nella finestra del browser.

La sintassi di questi metodi è indicata di seguito.

Sintassi di getElementById

documento.getElementById ("TestoD").value = "text_message";

Sintassi di getElementsByClassName

documento.getElementsByClassName ("Clname").valore ;

Sintassi del querySelector

documento.QuerySelector ("ID1").valore

La descrizione dei parametri di cui sopra è di seguito:

• testo: indica l'id di un elemento.
• messaggio testuale: rappresenta il messaggio da visualizzare.
• Clname: Specificare il nome della classe.
• ID1: rappresenta l'ID o la classe di un elemento HTML.

Esempio 1: ottenere il valore di input usando il metodo getElementById ()

Un altro esempio è considerato per ottenere il valore di input in JavaScript.

Html

Un esempio per ottenere il valore del campo di testo

Messaggio preferito:

Premere il pulsante per visualizzare il valore di testo.

Pulsante di visualizzazione

Il codice HTML ottiene il valore di input "Benvenuti in JavaScript"Premendo il"Pulsante di visualizzazione". Il pulsante è collegato al file Display_fn () metodo.

JavaScript

funzione display_fn ()
var a = documento.getElementById ("MTXT").valore;
documento.getElementById ("Demo").InnerHtml = a;

Un metodo Display_fn () viene impiegato per recuperare il valore del testo nel file HTML getelementbyid.

Esempio 2: ottenere il valore di input utilizzando il metodo getElementsByClassName ()

Un esempio è considerato per ottenere il valore numerico dal campo di input in JavaScript.

File html

Un esempio per ottenere il valore numerico del campo

Ottieni valore numerico

In questo codice, la descrizione è di seguito:

• La classe inpcls viene utilizzato per inserire il numero numerico.
• Successivamente, è collegato un pulsante associato al getInpVal () metodo.
• Alla fine, un file javascript test.js è collegato assegnando la fonte src variabile.

JavaScript

funzione getInPVal ()
let inpval = documento.getElementsByClassName ("InPCLS") [0].valore;
Avviso (inpval);

Nel file JavaScript:

• Un metodo getInpVal () viene utilizzato per estrarre il valore da Html file.
• L'estrazione è eseguita da GetelementByClassName ("InPCLS") [0].valore.
• Alla fine, viene generato un messaggio di avviso passando il Inpval variabile.

Produzione

L'output mostra che l'utente prima inserisce qualsiasi numero. Successivamente, una scatola di allerta viene generata premendo il "Ottieni valore numerico"Pulsante.

Esempio 3: Ottieni il valore di input usando il metodo QuerySelector ()

Un altro esempio è considerato per ottenere il valore usando il QuerySelector () metodo.

Codice

Ottieni valore utilizzando Selector query

Pulsante di visualizzazione

In questo codice, la descrizione è la seguente:

• In primo luogo, a casella di testo e a pulsante sono attaccati con E tag rispettivamente.
• IL pulsante è associato a getValueInput () metodo.
• In questo metodo, QuerySelector () viene impiegato per estrarre il valore del casella di testo e visualizzarlo usando Val1.

Produzione

L'output mostra il messaggio "JavaScript"Premendo il pulsante nel browser.

Conclusione

IL getelementbyid, getElementsByClassName, E QuerySelector () I metodi vengono utilizzati per ottenere il valore di input in JavaScript. I primi due metodi recuperano gli elementi usando il nome ID e classe. Mentre il terzo metodo può ottenere gli elementi usando un ID e un nome di classe. Qui, hai imparato a utilizzare tutti e tre questi metodi per ottenere valori di input in JavaScript.