Médiaforma

getElementById, première approche

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Cette rubrique est très importante. Elle va vous montrer comment accéder au contenu d’une balise HTML et modifier ce contenu. Ici, nous allons modifier le contenu d’une balise <input> de type text, c’est-à-dire d’une zone de texte. Le texte affiché dans la zone de texte sera mis en majuscule lorsque l’utilisateur cliquera sur un bouton de commande.

En utilisant une technique similaire, vous pourrez modifier le contenu de nombreuses autres balises HTML.

Le corps du document contient un formulaire composé de deux éléments :

  • Une balise <input> de type text et d’identifiant saisie.

  • Une balise <input> de type button. Le texte affiché sur le bouton est défini dans l’attribut value. Lorsque l’utilisateur clique sur le bouton, la fonction JavaScript majuscules() est exécutée.

Nous allons maintenant nous intéresser au code JavaScript. La fonction majuscules() est exécutée à chaque appui sur le bouton de commande. Dans un premier temps, la fonction  getElementById() est utilisée pour récupérer l’objet HTML d’identifiant saisie. Prenez quelques secondes pour examiner la syntaxe utilisée : document.getElementById(« saisie »). La fonction getElementById() est appliquée au document et l’objet à récupérer a pour identifiant saisie. Finalement, vous voyez que cette instruction n’a rien de bien sorcier. L’objet retourné est stocké dans une variable nommée objet.

Pour obtenir la valeur stockée dans la zone de texte, c’est-à-dire dans l’objet ayant pour nom … objet, il suffit d’appliquer le suffixe value à cet objet. Ainsi, objet.value correspond au texte affiché dans la zone de texte. Pour transformer ce texte en caractères majuscules, nous utilisons la fonction JavaScript toUpperCase(). Comme vous pouvez le voir, cette fonction suffixe objet.value, et donc, donne la version majuscule de la zone de texte. En affectant objet.value.toUpperCase() à objet.value, la version majuscule de la zone de texte est affichée dans la zone de texte. C’est ainsi qu’un clic sur le bouton de commande transforme le contenu de la zone de texte en majuscules.

Exécutons ce code dans un navigateur. Ici, je tape le texte « BonJouR » dans la zone de texte puis j’appuie sur le bouton de commande. Comme prévu, toutes les lettres sont transformées en majuscules :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply