So ändern Sie den Beschriftungstext mit JavaScript

Beim Ausfüllen eines bestimmten Formulars oder eines Fragebogens gibt es häufig Situationen, in denen eine bestimmte Antwort oder Benachrichtigung als Antwort auf die ausgewählte Option angezeigt werden muss. Zum Beispiel den Umgang mit Multiple-Choice-Fragen usw. In solchen Fällen ist das Ändern des Beschriftungstextes mit JavaScript sehr hilfreich bei der Verbesserung der Zugänglichkeit von HTML -Formularen und dem gesamten Dokumentendesign.

So ändern Sie den Beschriftungstext mit JavaScript?

Die folgenden Ansätze können verwendet werden, um den Beschriftungstext in JavaScript zu ändern:

• • “Innerhtml" Eigentum.
  • “InnerText" Eigentum.
  • jQuery "Text()" Und "html ()”Methoden.

Ansatz 1: Ändern Sie den Beschriftungstext in JavaScript mit der Innerhtml -Eigenschaft

Der "InnerhtmlEigenschaft gibt den inneren HTML -Inhalt eines Elements zurück. Diese Eigenschaft kann verwendet werden, um das spezifische Etikett abzurufen und ihren Text in einen neu zugewiesenen Textwert zu ändern.

Syntax

Element.Innerhtml

In der obigen Syntax:

• • “Element”Bezieht sich auf das Element, auf das die spezifische Eigenschaft angewendet wird, um ihren HTML -Inhalt zurückzugeben.

Beispiel

Gehen Sie den folgenden Code -Snippet durch, um das angegebene Konzept klar zu erklären:

Dom



Klicken Sie hier

• • Erstens innerhalb der “”Tag, enthalten die“Etikett"Mit dem angegebenen"Ausweis" Und "Text" Werte.
  • Erstellen Sie danach eine Taste mit einem angehängten “ONCLICK”Ereignis auf den FunktionslabelText () aufrufen.

Folgen Sie nun den untergegebenen JavaScript-Code:

Funktion LabelText ()
Lassen Sie Get = Dokument.GetElementById ('LBL')
erhalten.Innerhtml = "Der abgekürzte Name ist Dokumentobjektmodell";

• • Eine Funktion namens deklarieren “labelText ()”.
  • In seiner Definition zugreifen Sie auf die ID der angegebenen “Etikett" Verwendung der "dokumentieren.GetElementById ()" Methode.
  • Wenden Sie schließlich die Innerhtml -Eigenschaft an und weisen Sie eine neue zu, “TextWert für das aufgerufene Etikett. Dies führt dazu, dass der Beschriftungstext bei der Schaltfläche Klick in einen neuen Textwert umgewandelt wird.

Ausgang

In der obigen Ausgabe kann beobachtet werden, dass der Textwert von “Etikett”Wird sowohl im DOM als auch im Code auch in der“ geändertElemente" Abschnitt.

Ansatz 2: Ändern Sie den Beschriftungstext in JavaScript mit der InnerText -Eigenschaft

Der "InnerTextEigenschaft gibt den Textinhalt des Elements zurück. Diese Eigenschaft kann implementiert werden, um einen im Feld Eingabe eingegebenen Benutzer-Input-Wert zuordnen.

Syntax

Element.InnerText

In der obigen Syntax:

• • “Element”Zeigt das Element an, auf dem die spezifische Eigenschaft angewendet wird, um ihren Textinhalt zurückzugeben.

Beispiel

Das folgende Beispiel zeigt das angegebene Konzept:

Geben Sie einen Namen ein:

N / A

• • Zunächst ein Eingabtextfeld mit dem angegebenen “zu,“Ausweis”. Der "NullDer Wert hier gibt an, dass der Wert vom Benutzer abgerufen wird und automatisch auf “festgelegt wirdausVermeiden Sie die vorgeschlagenen Werte.
  • Fügen Sie danach ein Etikett mit dem angegebenen “beiAusweis" Und "Text" Wert.

Führen Sie jetzt im JavaScript -Code -Snippet die folgenden Schritte aus:

Funktion LabelText ()
Lassen Sie Get = Dokument.GetElementById ('LBL');
lass name = document.GetElementById ('Name').Wert;
erhalten.InnerText = Name;

• • Definieren Sie eine Funktion namens “labelText ()”. Greifen Sie in seiner Definition mit der “auf das erstellte Etikett zudokumentieren.GetElementById ()" Methode.
  • Wiederholen Sie in ähnlicher Weise den obigen Schritt, um auf das angegebene Eingabentextfeld zuzugreifen und den von Benutzer eingereichten Wert daraus zu erhalten.
  • Schließlich weisen Sie den von dem benutzergerichteten Wert aus dem vorherigen Schritt dem abgerufenen Etikett zu. Dadurch wird der Beschriftungstext in den von dem benutzergeeinigten Wert im Feld Eingabetext eingereichten Wert geändert.

Ausgang

In der obigen Ausgabe ist es offensichtlich, dass die gewünschte Anforderung erreicht wird.

Ansatz 3: Ändern Sie den Beschriftungstext in JavaScript mit den Methoden Jquery Text () und HTML ()

Der "Text()Die Methode gibt den Textinhalt der ausgewählten Elemente zurück.Der "html ()Die Methode gibt den Innerhtml -Inhalt der ausgewählten Elemente zurück.

Syntax

$ (Selektor).Text()

In dieser Syntax:

• • “Wähler”Zeigt auf den Textinhalt des aufgerufenen Elements.

$ (Selektor).html ()

In der oben gegebenen Syntax:

• • “Wähler”Bezieht sich auf die Innerhtml des aufgerufenen Elements.

Beispiel

In diesem Beispiel wird das angegebene Konzept mit JQuery -Methoden veranschaulicht.

Gehen Sie durch den untergegebenen Code-Snippet:

Dies ist die folgende Website:



Inhalt:



Klicken Sie auf die Website
Klicken Sie für Inhalte

• • Zunächst einschließen die “JQueryBibliothek, um ihre Methoden anzuwenden.
  • Danach innerhalb der “"Tag, zwei verschiedene Etiketten mit dem angegebenen" enthalten "AusweisUnd Textwert gegen jeden von ihnen.
  • Zuordnen Sie jedem der erstellten Etiketten auch separate Schaltflächen zu. Beide Tasten haben eine angeschlossen “ONCLICKEreignis, das zwei verschiedene bestimmte Funktionen beruft.

Gehen Sie nun die folgenden JavaScript -Codezeilen durch:

Funktion LabelText ()
$ ('#lbl1').Text ("LinuxHint")

Funktion LabelText2 ()
$ ('#lbl2').HTML ("JavaScript")

• • Deklarieren Sie im ersten Schritt eine Funktion namens “labelText ()”.
  • Greifen Sie in seiner Definition auf das Etikett gegen die abgerufenen zu “Ausweis”Und wenden Sie die“ anText()Methode dazu. Dies führt dazu,.
  • In ähnlicher Weise definieren Sie eine Funktion namens “LabelText2 ()”.
  • In ähnlicher Weise wiederholen Sie den oben diskutierten Schritt für den Zugriff auf das Etikett. In diesem Fall wenden Sie die an “anhtml ()" Methode. Diese Methode funktioniert auch auf die gleiche Weise und gibt den angegebenen Textwert zurück.

Ausgang

In der obigen Ausgabe entspricht der erste transformierte Textwert der Etikett im Dokumentobjektmodell (DOM) der JQuery “Text()"Methode und die andere ist ein Ergebnis der"html ()" Methode.

Wir haben die Ansätze zum Ändern des Beschriftungstextes mit JavaScript zusammengestellt.

Abschluss

Der "Innerhtml”Eigentum, die“InnerText"Eigentum oder JQuery's"Text()" Und "html ()Methoden können verwendet werden, um den Beschriftungstext mit JavaScript zu ändern. Die Innerhtml -Eigenschaft kann angewendet werden, um das spezifische Etikett zu erhalten und ihren Textinhalt in einen neu zugewiesenen Textwert zu ändern. Die Innertext -Eigenschaft kann implementiert werden. Der JQuery -Ansatz kann verwendet werden, um den Textwert des Etiketts mit Hilfe seiner beiden Methoden zu transformieren, was zu demselben Ergebnis in Form von zwei verschiedenen zugewiesenen Textwerten führt. In diesem Artikel wurde die Techniken zum Ändern des Etikettentextes mit JavaScript gezeigt.