So erhalten Sie Eingabwert in JavaScript

JavaScript bietet eine Vielzahl von Funktionen, um interaktive Schnittstellen zu erstellen. Man kann den Wert eines beliebigen Elements mit JavaScript -Methoden abrufen. Der Eingabewert kann irgendwo auf der Webseite gedruckt oder als Warnmeldung erhalten werden. All dies ist mit Hilfe von JavaScript möglich. Hier werden wir das beschreiben JavaScript Unterstützung, um den Eingangswert von jedem Element zu erhalten. Die folgenden Lernergebnisse werden erwartet:

• So erhalten Sie Eingabwert in JavaScript
• Erhalten Sie den Eingangswert mit der Methode getElementById ()
• Erhalten Sie den Eingangswert mit der Methode GetElementsByClassName ()
• Nutzen Sie den Eingabelwert mithilfe von querySelector () -Methoden

So erhalten Sie Eingabwert in JavaScript

JavaScript liefert zwei Eigenschaften, um die Eingabewerte durch Einsatz des GetelementById, GetElements ByclassName, Und QuerySelector Methoden. Diese Methoden extrahieren die Zeichenfolge sowie den numerischen Wert, um die Benutzerinformationen anzuzeigen. Alle berühmten Browser unterstützen beide Eigenschaften. Der Wert Eigenschaft gibt die Informationen des Benutzers zurück. Darüber hinaus ist die Eigenschaft nützlich, um einen bestimmten Wert für die Anzeige im Browserfenster zuzuweisen.

Die Syntax dieser Methoden ist unten angegeben.

Syntax von GetElementById

dokumentieren.GetElementById ("TextId").value = "text_message";

Syntax von GetElements ByClassName

dokumentieren.GetElements byclassName ("Clname").Wert ;

Syntax von QuerySelector

dokumentieren.QuerySelector ("ID1").Wert

Die Beschreibung der obigen Parameter erfolgt wie unten:

• TextID: bezeichnet die ID eines Elements.
• Textnachricht: repräsentiert die zu angezeigte Nachricht.
• Clname: Geben Sie den Namen der Klasse an.
• ID1: repräsentiert die ID oder Klasse eines HTML -Elements.

Beispiel 1: Erhalten Sie den Eingangswert mit der Methode getElementById ()

Ein weiteres Beispiel wird berücksichtigt, um den Eingabwert in JavaScript zu erhalten.

Html

Ein Beispiel, um den Wert des Textfelds zu erhalten

Lieblingsnachricht:

Drücken Sie die Taste, um den Textwert anzuzeigen.

Taste anzeigen

Der HTML -Code erhält den Eingabewert “Willkommen bei JavaScript"Durch das Drücken der"Taste anzeigen”. Die Taste ist mit dem angehängt Display_fn () Methode.

JavaScript

Funktion display_fn ()
var a = dokument.GetElementById ("mtxt").Wert;
dokumentieren.GetelementById ("Demo").Innerhtml = a;

Eine Methode Display_fn () wird verwendet, um den Wert des Textes in der HTML -Datei nach abzurufen GetelementById.

Beispiel 2: Erhalten Sie den Eingangswert mit der Methode getElementsByClassName ()

Es wird ein Beispiel betrachtet, um den numerischen Wert aus dem Eingabefeld in JavaScript zu erhalten.

HTML -Datei

Ein Beispiel, um den numerischen Wert des Feldes zu erhalten

Numerische Wert erhalten

In diesem Code lautet die Beschreibung wie unten:

• Die Klasse INPCLS wird verwendet, um die numerische Zahl einzugeben.
• Danach wird eine Taste angehängt, die mit dem verbunden ist GetInpval () Methode.
• Am Ende eine JavaScript -Datei prüfen.JS wird durch Zuweisung der Quelle verknüpft src Variable.

JavaScript

Funktion getInpval ()
let inpval = dokument.GetElementsByClassName ("Inpcls") [0].Wert;
Alarm (inpval);

In der JavaScript -Datei:

• Eine Methode GetInpval () wird verwendet, um den Wert aus dem zu extrahieren Html Datei.
• Die Extraktion wird von G durchgeführtETELEMENTBYCLASSNAME ("INPCLS") [0].Wert.
• Am Ende wird eine Warnmeldung erzeugt, indem das übergeben wird Inpval Variable.

Ausgang

Die Ausgabe zeigt, dass der Benutzer zuerst eine beliebige Zahl eingibt. Danach wird eine Warnbox erzeugt, indem Sie auf die "drücken" erzeugt werdenNumerische Wert erhalten" Taste.

Beispiel 3: Eingabewert mithilfe von querySelector () Methode erhalten

Ein weiteres Beispiel wird angesehen, um den Wert mit dem zu erhalten QuerySelector () Methode.

Code

Nutzen Sie den Wert mit dem Abfrageauswahl

Taste anzeigen

In diesem Code lautet die Beschreibung wie folgt:

• Erstens a Textfeld und ein Taste sind mit Und Tags.
• Der Taste ist mit dem verbunden GetValueInput () Methode.
• In dieser Methode, QuerySelector () wird verwendet, um den Wert der zu extrahieren Textfeld und anzeigen es verwenden Val1.

Ausgang

Die Ausgabe zeigt die Nachricht “JavaScriptDurch Drücken der Taste im Browser.

Abschluss

Der GetelementById, GetElements ByclassName, Und QuerySelector () Methoden werden verwendet, um den Eingabewert in JavaScript zu erhalten. Die ersten beiden Methoden rufen die Elemente mit dem ID und dem Klassennamen ab. Während die dritte Methode die Elemente mit einer ID sowie eines Klassennamens erhalten kann. Hier haben Sie gelernt, alle drei dieser Methoden zu verwenden, um Eingabeteile in JavaScript zu erhalten.