Lors du processus de remplissage d'un formulaire ou d'un questionnaire particulier, il existe souvent des situations où il est nécessaire d'afficher une réponse ou une notification particulière en réponse à l'option sélectionnée. Par exemple, traiter des questions à choix multiples, etc. Dans de tels cas, la modification du texte de l'étiquette à l'aide de JavaScript est très utile pour améliorer l'accessibilité des formulaires HTML et la conception globale du document.
Comment modifier le texte de l'étiquette à l'aide de JavaScript ?
Les approches suivantes peuvent être utilisées pour modifier le texte de l'étiquette en JavaScript :
-
- ' innerHTML ' propriété.
- ' Texteintérieur ' propriété.
- jQuery ' texte() ' et ' html() ” méthodes.
Approche 1 : Modifier le texte de l'étiquette en JavaScript à l'aide de la propriété innerHTML
La ' innerHTML ” renvoie le contenu HTML interne d'un élément. Cette propriété peut être utilisée pour récupérer l'étiquette spécifique et remplacer son texte par une valeur de texte nouvellement attribuée.
Syntaxe
élément.innerHTML
Dans la syntaxe ci-dessus :
-
- ' élément ” fait référence à l'élément sur lequel la propriété spécifique sera appliquée pour renvoyer son contenu HTML.
Exemple
Parcourez l'extrait de code suivant pour expliquer clairement le concept énoncé :
< centre >< corps >
< étiquette identifiant = 'lb' > DOM étiquette >
< Br >< Br >
< bouton sur clic = 'labelText()' > Cliquez ici bouton >
corps > centre >
-
- Tout d'abord, au sein du «
', incluez le ' étiquette ' avec le ' identifiant ' et ' texte ' valeurs. - Après cela, créez un bouton avec un ' sur clic ” événement invoquant la fonction labelText().
- Tout d'abord, au sein du «
Maintenant, suivez le code JavaScript ci-dessous :
fonction labelText ( ) {laisser obtenir = document.getElementById ( 'lbl' )
get.innerHTML= 'Le nom abrégé est Document Object Model' ;
}
-
- Déclarez une fonction nommée ' labelText() ”.
- Dans sa définition, accédez à l'id du ' étiquette ' en utilisant le ' document.getElementById() ' méthode.
- Enfin, appliquez la propriété innerHTML et attribuez un nouveau ' texte ” à l'étiquette accédée. Cela entraînera la transformation du texte de l'étiquette en une nouvelle valeur de texte lors du clic sur le bouton.
Production
Dans la sortie ci-dessus, on peut observer que la valeur textuelle de ' étiquette ' est modifié à la fois sur le DOM et dans le code ainsi que dans le ' Éléments ' section.
Approche 2 : Modifier le texte de l'étiquette en JavaScript à l'aide de la propriété innerText
La ' Texteintérieur ” La propriété renvoie le contenu textuel de l'élément. Cette propriété peut être implémentée pour allouer une valeur saisie par l'utilisateur saisie dans le champ de saisie au texte de l'étiquette affectée.
Syntaxe
element.innerText
Dans la syntaxe ci-dessus :
-
- ' élément ” indique l'élément sur lequel la propriété spécifique sera appliquée pour renvoyer son contenu textuel.
Exemple
L'exemple suivant illustre le concept énoncé :
< centre >< corps >Entrez un nom: < saisir taper = 'texte' identifiant = 'Nom' évaluer = '' Saisie automatique = 'à l'arrêt' >
< p >< saisir taper = 'bouton' identifiant = 'bt' évaluer = 'Modifier le texte de l'étiquette' sur clic = 'labelText()' > p >
< étiquette identifiant = 'lb' > N / UN étiquette >
corps > centre >
-
- Tout d'abord, allouez un champ de texte d'entrée ayant le ' identifiant ”. La ' nul ' La valeur ici indique que la valeur sera récupérée auprès de l'utilisateur et que la saisie semi-automatique est définie sur ' à l'arrêt ” évitera les valeurs suggérées.
- Après cela, incluez une étiquette ayant la mention ' identifiant ' et ' texte ' évaluer.
Maintenant, dans l'extrait de code JavaScript, procédez comme suit :
fonction labelText ( ) {laisser obtenir = document.getElementById ( 'lbl' ) ;
laisser nom = document.getElementById ( 'Nom' ) .évaluer;
get.innerText = nom ;
}
-
- Définissez une fonction nommée ' labelText() ”. Dans sa définition, accédez à l'étiquette créée à l'aide de la touche ' document.getElementById() ' méthode.
- De même, répétez l'étape ci-dessus pour accéder au champ de texte de saisie spécifié et en obtenir la valeur saisie par l'utilisateur.
- Enfin, attribuez la valeur saisie par l'utilisateur à l'étape précédente à l'étiquette extraite. Cela remplacera le texte de l'étiquette par la valeur saisie par l'utilisateur dans le champ de texte de saisie.
Production
Dans la sortie ci-dessus, il est évident que l'exigence souhaitée est atteinte.
Approche 3 : modifier le texte de l'étiquette en JavaScript à l'aide des méthodes jQuery text() et html()
La ' texte() ” renvoie le contenu textuel des éléments sélectionnés. La méthode “ html() ” renvoie le contenu innerHTML des éléments sélectionnés.
Syntaxe
$ ( sélecteur ) .texte ( )
Dans cette syntaxe :
-
- ' sélecteur ” pointe vers le contenu textuel de l'élément accédé.
Dans la syntaxe ci-dessus :
-
- ' sélecteur ” fait référence à l'innerHTML de l'élément accédé.
Exemple
Cet exemple illustrera le concept énoncé à l'aide des méthodes jQuery.
Parcourez l'extrait de code ci-dessous :
< scénario src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' > scénario >< centre >< corps >
< étiquette identifiant = 'lbl1' > Il s'agit du site Web suivant : étiquette >
< Br >< Br >
< étiquette identifiant = 'lbl2' > Contenu: étiquette >
< Br >< Br >
< bouton sur clic = 'labelText()' > Cliquez sur pour Site Internet bouton >
< bouton sur clic = 'labelText2()' > Cliquez sur pour Contenu bouton >
corps > centre >
-
- Tout d'abord, incluez le ' jQuery » bibliothèque pour appliquer ses méthodes.
- Après cela, dans le '
', incluez deux étiquettes différentes avec le '' spécifié identifiant ' et la valeur du texte contre chacun d'eux. - Attribuez également des boutons distincts à chacune des étiquettes créées. Les deux boutons auront un ' sur clic ” événement invoquant deux fonctions spécifiées différentes.
Maintenant, parcourez les lignes de code JavaScript suivantes :
fonction labelText ( ) {$ ( '#lbl1' ) .texte ( 'Linux' )
}
fonction labelText2 ( ) {
$ ( '#lbl2' ) .html ( 'JavaScript' )
}
-
- Dans la première étape, déclarez une fonction nommée ' labelText() ”.
- Dans sa définition, accédez à l'étiquette contre le ' identifiant ' et appliquer le ' texte() ” méthode pour cela. Cela entraînera la modification de la valeur textuelle de l'étiquette par la valeur spécifiée dans son paramètre.
- De même, définissez une fonction nommée ' labelText2() ”.
- Ici, de la même manière, répétez l'étape décrite ci-dessus pour accéder à l'étiquette. Dans ce cas, appliquez le « html() ' méthode. Cette méthode fonctionnera également de la même manière et renverra la valeur de texte spécifiée, modifiant ainsi le texte de l'étiquette.
Production
Dans la sortie ci-dessus, la première valeur de texte transformée de l'étiquette sur le modèle d'objet de document (DOM) correspond au jQuery ' texte() ” méthode et l'autre est le résultat de la “ html() ' méthode.
Nous avons compilé les approches pour modifier le texte de l'étiquette à l'aide de JavaScript.
Conclusion
La ' innerHTML ' propriété, la ' Texteintérieur 'propriété, ou jQuery's' texte() ' et ' html() ” peuvent être utilisées pour modifier le texte de l'étiquette à l'aide de JavaScript. La propriété innerHTML peut être appliquée pour obtenir l'étiquette spécifique et modifier son contenu textuel en une valeur textuelle nouvellement attribuée. La propriété innerText peut être implémentée pour allouer une nouvelle valeur de texte à l'étiquette accédée, la modifiant ainsi. L'approche jQuery peut être utilisée pour transformer la valeur de texte de l'étiquette à l'aide de ses deux méthodes aboutissant au même résultat sous la forme de deux valeurs de texte allouées différentes. Cet article a démontré les techniques pour modifier le texte de l'étiquette à l'aide de JavaScript.