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 der Umgang mit Multiple-Choice-Fragen usw. In solchen Fällen ist das Ändern des Beschriftungstextes mithilfe von JavaScript sehr hilfreich, um die Zugänglichkeit von HTML-Formularen und das gesamte Dokumentdesign zu verbessern.
Wie ändere ich den Etikettentext mit JavaScript?
Die folgenden Ansätze können verwendet werden, um Beschriftungstext in JavaScript zu ändern:
-
- „ innerHTML ' Eigentum.
- „ innerText ' Eigentum.
- jQuery “ Text() ' und ' html() “Methoden.
Ansatz 1: Beschriftungstext in JavaScript mithilfe der innerHTML-Eigenschaft ändern
Das ' innerHTML ”-Eigenschaft gibt den inneren HTML-Inhalt eines Elements zurück. Diese Eigenschaft kann verwendet werden, um das spezifische Etikett abzurufen und seinen 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 seinen HTML-Inhalt zurückzugeben.
Beispiel
Gehen Sie das folgende Code-Snippet durch, um das angegebene Konzept klar zu erklären:
< Center >< Karosserie >
< Etikett Ich würde = 'lbl' > Dom Etikett >
< Br >< Br >
< Taste anklicken = 'labelText()' > Klicken Sie hier Taste >
Karosserie > Center >
-
- Zunächst innerhalb der „
”-Tag, fügen Sie das “ Etikett ” mit dem angegebenen “ Ich würde ' und ' Text ' Werte. - Erstellen Sie danach eine Schaltfläche mit einem angehängten „ anklicken ”-Ereignis, das die Funktion labelText() aufruft.
- Zunächst innerhalb der „
Folgen Sie nun dem unten angegebenen JavaScript-Code:
Funktion LabelText ( ) {Lassen get = document.getElementById ( 'lbl' )
get.innerHTML= 'Der abgekürzte Name ist Document Object Model' ;
}
-
- Deklarieren Sie eine Funktion mit dem Namen „ labelText() “.
- Greifen Sie in seiner Definition auf die ID des angegebenen „ Etikett ' Verwendung der ' document.getElementById() ' Methode.
- Wenden Sie abschließend die innerHTML-Eigenschaft an und weisen Sie ein neues „ Text ”-Wert zum aufgerufenen Label. Dies führt dazu, dass der Beschriftungstext beim Klicken auf die Schaltfläche in einen neuen Textwert umgewandelt wird.
Ausgabe
In der obigen Ausgabe kann beobachtet werden, dass der Textwert von „ Etikett “ wird sowohl im DOM als auch im Code sowie im „ Elemente ' Sektion.
Ansatz 2: Beschriftungstext in JavaScript mithilfe der innerText-Eigenschaft ändern
Das ' innerText ”-Eigenschaft gibt den Textinhalt des Elements zurück. Diese Eigenschaft kann implementiert werden, um einen in das Eingabefeld eingegebenen Benutzereingabewert dem Text des zugewiesenen Labels zuzuordnen.
Syntax
element.innerText
In der obigen Syntax:
-
- „ Element “ gibt das Element an, auf das die spezifische Eigenschaft angewendet wird, um seinen Textinhalt zurückzugeben.
Beispiel
Das folgende Beispiel demonstriert das genannte Konzept:
< Center >< Karosserie >Geben Sie einen Namen ein: < Eingang Typ = 'Text' Ich würde = 'Name' Wert = '' Autovervollständigung = 'aus' >
< p >< Eingang Typ = 'Taste' Ich würde = 'bt' Wert = 'Etikettentext ändern' anklicken = 'labelText()' > p >
< Etikett Ich würde = 'lbl' > N / EIN Etikett >
Karosserie > Center >
-
- Ordnen Sie zunächst ein Eingabetextfeld mit der Angabe „ Ich würde “. Das ' Null ” Der Wert hier gibt an, dass der Wert vom Benutzer abgerufen wird und die automatische Vervollständigung auf „ aus “ vermeidet die vorgeschlagenen Werte.
- Fügen Sie danach ein Etikett mit dem angegebenen „ Ich würde ' und ' Text ' Wert.
Führen Sie nun im JavaScript-Code-Snippet die folgenden Schritte aus:
Funktion LabelText ( ) {Lassen get = document.getElementById ( 'lbl' ) ;
Lassen name = document.getElementById ( 'Name' ) .Wert;
get.innerText = name;
}
-
- Definieren Sie eine Funktion mit dem Namen „ labelText() “. Greifen Sie in seiner Definition auf das erstellte Etikett mit dem „ document.getElementById() ' Methode.
- Wiederholen Sie auf ähnliche Weise den obigen Schritt, um auf das angegebene Eingabetextfeld zuzugreifen und den vom Benutzer eingegebenen Wert daraus abzurufen.
- Weisen Sie schließlich dem abgerufenen Label den vom Benutzer eingegebenen Wert aus dem vorherigen Schritt zu. Dadurch wird der Beschriftungstext in den vom Benutzer eingegebenen Wert im Eingabetextfeld geändert.
Ausgabe
In der obigen Ausgabe ist ersichtlich, dass die gewünschte Anforderung erfüllt wird.
Ansatz 3: Labeltext in JavaScript mit den Methoden jQuery text() und html() ändern
Das ' Text() “-Methode gibt den Textinhalt der ausgewählten Elemente zurück. Die „ html() ”-Methode gibt den innerHTML-Inhalt der ausgewählten Elemente zurück.
Syntax
$ ( Wähler ) .Text ( )
In dieser Syntax:
-
- „ Wähler “ zeigt auf den Textinhalt des aufgerufenen Elements.
In der oben angegebenen Syntax:
-
- „ Wähler “ bezieht sich auf das innere HTML des aufgerufenen Elements.
Beispiel
Dieses Beispiel veranschaulicht das angegebene Konzept unter Verwendung von jQuery-Methoden.
Gehen Sie das unten angegebene Code-Snippet durch:
< Skript Quelle = „https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js“ > Skript >< Center >< Karosserie >
< Etikett Ich würde = 'lbl1' > Dies ist die folgende Webseite: Etikett >
< Br >< Br >
< Etikett Ich würde = 'lbl2' > Inhalt: Etikett >
< Br >< Br >
< Taste anklicken = 'labelText()' > Klicken zum Webseite Taste >
< Taste anklicken = 'labelText2()' > Klicken zum Inhalt Taste >
Karosserie > Center >
-
- Fügen Sie zunächst „ jQuery ” Bibliothek, um ihre Methoden anzuwenden.
- Danach innerhalb der „
”-Tag zwei verschiedene Labels mit dem angegebenen “ Ich würde ” und Textwert für jeden von ihnen. - Weisen Sie außerdem jedem der erstellten Labels separate Schaltflächen zu. Beide Schaltflächen haben ein angehängtes „ anklicken ” Ereignis, das zwei verschiedene spezifizierte Funktionen aufruft.
Gehen Sie nun die folgenden JavaScript-Codezeilen durch:
Funktion LabelText ( ) {$ ( '#lbl1' ) .Text ( 'Linux' )
}
Funktion LabelText2 ( ) {
$ ( '#lbl2' ) .html ( 'JavaScript' )
}
-
- Deklarieren Sie im ersten Schritt eine Funktion namens „ labelText() “.
- Greifen Sie in seiner Definition auf das Label gegen das abgerufene „ Ich würde “ und wenden Sie das „ Text() “Methode dazu. Dies führt dazu, dass der Textwert des Labels auf den in seinem Parameter angegebenen Wert geändert wird.
- Definieren Sie auf ähnliche Weise eine Funktion mit dem Namen „ labelText2() “.
- Wiederholen Sie hier in ähnlicher Weise den oben erörterten Schritt zum Zugreifen auf das Etikett. Wenden Sie in diesem Fall das „ html() ' Methode. Diese Methode funktioniert auch auf die gleiche Weise und gibt den angegebenen Textwert zurück, wodurch der Beschriftungstext geändert wird.
Ausgabe
In der obigen Ausgabe entspricht der erste transformierte Textwert der Bezeichnung im Document Object Model (DOM) der jQuery „ Text() “-Methode und der andere ist ein Ergebnis der „ html() ' Methode.
Wir haben die Ansätze zum Ändern von Etikettentexten mit JavaScript zusammengestellt.
Fazit
Das ' innerHTML „Eigentum, das“ innerText ” Eigenschaft oder jQuery’s “ Text() ' und ' html() ”-Methoden können verwendet werden, um Etikettentext mit JavaScript zu ändern. Die innerHTML-Eigenschaft kann angewendet werden, um die spezifische Bezeichnung abzurufen und ihren Textinhalt in einen neu zugewiesenen Textwert zu ändern. Die Eigenschaft innerText kann implementiert werden, um dem Label, auf das zugegriffen wird, einen neuen Textwert zuzuweisen und ihn dadurch zu ändern. Der jQuery-Ansatz kann verwendet werden, um den Textwert des Labels mit Hilfe seiner zwei Methoden zu transformieren, was zum gleichen Ergebnis in Form von zwei unterschiedlich zugewiesenen Textwerten führt. In diesem Artikel wurden die Techniken zum Ändern von Beschriftungstext mit JavaScript demonstriert.