Médiaforma

All posts tagged value

Dans les rubriques précédentes, vous avez appris à accéder à des balises HTML en utilisant les fonctions JavaScript getElementById() et getElementsByName(). Ces fonctions sont très pratiques, mais elles nécessitent la définition d’attributs id ou name dans chacune des balises visées.

Dans cette rubrique, je vais vous présenter la fonction getElementsByTagName() qui permet de récupérer toutes les balises d’un certain type sans que celles-ci n’aient un attribut id ou name. Le résultat de la fonction est un tableau et chaque élément du tableau correspond à une balise.

Pour illustrer cette fonction, nous allons utiliser le code HTML de la rubrique précédente. Rappelons que ce code contient :

  • une balise <div> d’identifiant div1 ;
  • trois cases à cocher ;
  • un bouton de commande.

A titre d’exemple, la fonction getElementsByTagName() sera utilisée pour compter le nombre de balises <input> contenues dans le document. Le code JavaScript est défini dans la fonction test(), entre les lignes 5 et 9.

La ligne 7 définit la variable lesInput et l’initialise avec le résultat de la fonction getElementsByTagName(). L’argument “input” est passé à cette fonction, car on cherche à compter le nombre de balises< input> contenues dans le document.

Rappelez-vous : la fonction getElementsByTagName() retourne un tableau. La ligne 8 applique la fonction length à la variable lesInput pour connaître le nombre d’éléments contenus dans le tableau et donc, le nombre de balises <input> contenues dans le document. Le résultat est affiché dans la balise <div> en utilisant la technique habituelle. A savoir, la fonction innerHTML appliquée à l’objet div.

Exécutons ce code dans un navigateur. Un clic sur le bouton de commande affiche le nombre de balises <input> contenues dans le document :

Remarque
Il est possible de connaitre les valeurs stockées dans les attributs des balises récupérées avec la fonction getElementsByTagName(). Ainsi par exemple :

  • lesInput[2].name renvoie la valeur “couleur”, puisque l’attribut name de la troisième balise <input> vaut couleur.
  • lesInput[3].value renvoie la valeur “Cliquez ici” puisque l’attribut value de la quatrième balise <input> vaut “Cliquez ici”.


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 :