So erhalten Sie den Wert des Texteingangsfelds mit JavaScript?

JavaScript kann mit verschiedenen Webseiten interagieren, um sowohl Server als auch clientseitige Dienste bereitzustellen. Der Zweck von JavaScript soll interaktive Elemente auf Webseiten bereitstellen, um Benutzer zu engagieren. Diese interaktiven Elemente umfassen ein dynamisches Styling, das Eingeben des Werts, das Erhalten von Wert aus Formularen usw.

In diesem Beitrag wird eine praktische Implementierung darüber, wie der Wert des Textes von Eingabefeldern abgerufen werden kann, mit JavaScript durchgeführt.

Es gibt verschiedene Möglichkeiten, den Wert aus dem Eingabebuch zu erwerben, indem JavaScript verwendet wird. Wenn Sie diese im Auge behalten, sind die Ergebnisse des Beitrags:

• • Verwenden der GetElementById in JavaScript
  • Verwenden von GetElementsByClassName in JavaScript

Methode 1: Verwenden der GetElementById in JavaScript

In JavaScript die GetelementById Die Methode wird verwendet, um den Wert des Eingabtextfeldwerts mit einem ID -Attribut zu erhalten. Diese Methode wird verwendet, um eine Ausgabe durch einen bestimmten Wert zurückzugeben. Es gibt den Nullwert zurück, wenn das Element hier nicht vorhanden ist. Die meisten Benutzer verwenden es, um HTML -Elemente zu lesen und zu ändern. Die Syntax des GetElementByID lautet wie folgt:

Syntax

dokumentieren.getElementById ("inputId").Wert;

In dieser Syntax die GetelementById Die Methode extrahiert den Wert, indem das gleiche ID -Attribut bestanden wird “inputId”.

Code

Ein Beispiel dafür, den Wert des Eingabtextfelds zu erhalten.

Knopf drücken

Im obigen Code:

• • Zunächst wird das Eingabefeld verwendet, um die Eingabe vom Benutzer zu nehmen.
  • Danach die GetInputValue () Funktion wird verwendet, um die Werteigenschaft mithilfe zu erwerben GetelementById.Wert.
  • Es wird eine neue Schaltfläche erstellt, bei der die Funktion getInputValue () auf seinem Onclick -Event enthält.

Ausgang

Nach dem Ausführen des Code wird ein Textfeld und eine Schaltfläche angezeigt. Wenn Sie ein Wort in das Textfeld schreiben und die Schaltfläche gedrückt wird, wird ein Alarmfeld angezeigt, das das Wort/Text enthält. Das Alarmpop-up wäre wie unten gezeigt:

Methode 2: Verwenden des GetElementsByClassName in JavaScript

In JavaScript eine andere Methode als bekannt als GetElements ByclassName wird verwendet, um den Wert des Texteingangsfeldes zu erhalten. Es gibt den Satz der vom Klassennamen angegebenen Elemente zurück. Der GetElements byclassName () Die Methode wird unter Verwendung des Dokumentelements aufgerufen. Es durchsucht das gesamte Dokument und gibt die Ausgabe aller im Dokument vorhandenen Kinderelemente an. Die Syntax zur Verwendung dieser Methode ist unten bereitgestellt:

dokumentieren.GetElementsByClassName ("InputClass") [0].Wert;

Die Syntax wird beschrieben als:

• • Eingabeklasse: repräsentiert den Namen der Klasse.
  • [0]: Es stellt darum, dass, wenn hier kein Matching -Element vorhanden ist, dann undefined zurückkehren.

Code

Verwenden der GetElements -By -ClassName -Methode und anzeigen Sie sie an.

Wert erhalten

Der obige Code repräsentiert das Eingabeklasse wird als Klassenname des Textfelds angegeben. Danach die GetInputValue () Funktion wird verwendet, in dem GetElements byclassName () wird mit dem genannt dokumentieren Element durch Angabe des Klassennamens “Eingabeklasse“.

Ausgang

In der obigen Anzeige der Wert “Minhal”Wird in den eingereichten Text platziert.

Nach dem Drücken der Wert erhalten Taste, der Wert wird im Popup-Fenster gespeichert und als Warnmeldung angezeigt. Auf diese Weise die GetElements byclassName () Die Methode kann verwendet werden, um den Wert des Texteingangsfelds mit JavaScript zu erhalten.

Abschluss

In JavaScript die GetElementById () Und GetElements byclassName () Methoden werden verwendet, um den Wert des Texteingangsfeldes zu erhalten. Im GetElementById () Methode, der Wert für das Eingabetextfeld wird mit einem ID -Attribut extrahiert. Während die GetElements byclassName () Die Methode gibt den Satz von Elementen zurück, die im Klassennamen angegeben sind. Beide Methoden werden von fortschrittlichen Browsern unterstützt, darunter Chrome, Opera, Safari usw. Sie haben gelernt, den Wert des Texteingangsfelds mit zu extrahieren JavaScript.