Médiaforma

All posts tagged getelementbyid

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

La fonction JavaScript getElementById() n’est pas la seule à pouvoir récupérer un élément HTML. Vous pouvez également utiliser la fonction getElementsByName(). Ces deux fonctions agissent de manière similaire, si ce n’est que la première utilise l’attribut id pour récupérer l’élément HTML alors que la deuxième utilise l’attribut name.

Pour illustrer la fonction getElementsByName(), nous allons laisser l’utilisateur cocher une ou plusieurs cases, vérifier quelles cases sont cochées et afficher un message en conséquence.

Examinons le code HTML.

  • La ligne 26 définit une balise <div> d’identifiant div1 qui invite l’utilisateur à cocher une ou plusieurs cases :

<div id=”div1″>Quelles couleurs aimez-vous ?</div>

  • Les lignes 28 à 30 affichent trois cases à cocher de nom couleur :

<input type=”checkbox”> Bleu <br>

<input type=”checkbox”> Rouge <br>

<input type=”checkbox”> Vert <br>

  • Enfin, la ligne 31 définit un bouton de commande, y insère le texte “Cliquez ici” et lui associe la fonction événementielle test(). Cette fonction sera exécutée à chaque clic sur le bouton :

<input type=”button” value=”Cliquez ici”>

Ce code est vraiment très simple. Nous allons maintenant nous intéresser à la fonction JavaScript test(), définie entre les lignes 4 et 22.

Au début de la fonction, la variable aime est définie et initialisée avec une chaîne vide.

La ligne 8 teste l’état de la première case à cocher :

if (document.getElementsByName(‘couleur’)[0].checked == true)

Cette instruction vous paraît peut-être complexe. Rassurez-vous : en la décortiquant, vous verrez qu’elle est élémentaire. La fonction document.getElementsByName(‘couleur’) récupère l’objet dont l’attribut name vaut “couleur”. Comment est-ce possible me direz-vous puisque trois balises <input> ont un attribut name égal à “couleur” ? Eh bien, c’est là qu’intervient la suite de l’instruction. Le nombre spécifié entre crochets identifie l’une des cases à cocher. La première à pour valeur “0”, la deuxième “1” et la troisième “2”. Quant à la fonction checked, elle renvoie la valeur true (c’est-à-dire vrai) si la case est cochée, et la valeur false (c’est-à-dire faux) si la case est décochée.

Maintenant, je suis sûr que vous comprenez parfaitement l’instruction de la ligne 8. Pour ceux qui auraient encore des doutes, elle teste si la première case est cochée. Dans l’affirmative, l’instruction entre les accolades est exécutée. Cette instruction affecte le texte “Vous aimez le bleu.” Suivi d’un passage à la ligne à la variable aime.

Les deux blocs d’instructions suivants ne devraient pas vous poser de problème. La ligne 12 teste si la deuxième case est cochée. Dans l’affirmative, le texte “Vous aimez le rouge.” suivi d’un passage à la ligne est ajouté à la variable aime. Quant à la ligne 16, elle teste si la troisième case est cochée. Dans l’affirmative, le texte “Vous aimez le vert.” suivi d’un passage à la ligne est ajouté à la variable aime.

La ligne 20 affecte la variable aime au contenu de la balise <div> et donc affiche un a trois “Vous aimez…” en fonction des cases cochées.

Exécutons ce code dans un navigateur. Ici par exemple, je coche les cases Bleu et Rouge, puis je clique sur le bouton. Les messages affichés indiquent clairement les cases qui sont cochées.


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

Dans cette rubrique, je vais vous montrer comment afficher ou cacher une balise HTML en agissant sur une de ses propriétés CSS via du code JavaScript.

Examinons le code HTML. Le corps du document occupe les lignes 32 à 38. Très simple, il se contente d’afficher une balise <div> d’identifiant div1 et un bouton de commande d’identifiant afficheCache. La procédure événementielle bascule() est associée au clic sur ce bouton.

Examinons le code CSS, défini entre les lignes 4 et 11. Ce code a déjà été utilisé à plusieurs reprises dans les rubriques précédentes. Il définit la couleur d’arrière-plan et les dimensions de la balise <div>.

Vous l’aurez compris, le plus gros du traitement se fait dans la fonction JavaScript bascule(), entre les lignes 12 et 29.

  • La ligne 15 définit la variable etat et y stocke la valeur de la propriété CSS display de la balise <div> div1.
  • La ligne 16 définit la variable bouton et l’initialise avec la balise d’identifiant afficheCache, c’est-à-dire avec le bouton.

Si la variable etat vaut none, cela signifie que la balise <div> n’est pas affichée. Il faut donc l’afficher. C’est ce que fait la ligne 20, en affectant la valeur block à la propriété CSS display de la balise <div>. Par la même occasion, le texte affiché sur le bouton de commande est modifié en “Cacher la balise div” ligne 21.

Si la variable etat a une autre valeur que none, cela signifie que la balise <div> est affichée. Il faut donc la dissimuler. Cette opération est réalisée dans la ligne 25, en affectant la valeur none à la propriété CSS display de la balise <div>. Le texte affiché sur le bouton de commande est également modifié en “Afficher la balise div” ligne 26.

Il ne reste plus qu’à exécuter ce code dans un navigateur. Comme vous pouvez le constater, le bouton de commande est en mesure de cacher puis de réafficher la balise <div>.


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

Il est parfois bien pratique de donner le focus à une zone de saisie. Par exemple, lorsque vous vous connectez sur votre moteur de recherche préféré, une barre de saisie verticale clignote dans la zone de recherche, vous invitant à entrer quelques mots pour lancer une recherche. Si une de vos pages contient un formulaire de saisie, pourquoi ne pas donner le focus à la première zone de saisie ? Je suis sûr que vos utilisateurs apprécieraient cette attention. D’autant plus qu’en JavaScript, c’est un vrai jeu d’enfant …

Pour illustrer le code JavaScript à utiliser, nous allons définir un formulaire contenant deux textes, deux zones de saisie et deux boutons de commande.

Le corps du document est écrit en HTML. Il est défini entre les lignes 16 et 23 :

  • La ligne 18 affiche un texte et une zone de saisie d’identifiant entree1.
  • La ligne 19 définit un bouton de commande, y affiche le texte “Donner le focus à la zone de saisie 1” et met en place la fonction événementielle focus1() qui sera exécutée lorsque l’utilisateur clique sur le bouton de commande.
  • La ligne 20 est semblable à la ligne 18. Si ce n’est que la zone de saisie mise en place a pour identifiant saisie2.
  • Enfin, la ligne 21 définit un deuxième bouton de commande, y affiche le texte “Donner le focus à la zone de saisie 2” et met en place la fonction événementielle focus2() qui sera exécutée lorsque l’utilisateur clique sur le bouton de commande.

Passons au code JavaScript :

  • La fonction focus1() ne contient qu’une instruction, ligne 7. Après avoir récupéré l’élément d’identifiant entree1, c’est-à-dire la première zone de texte, la fonction JavaScript focus() lui est appliquée. Cette simple instruction provoque l’apparition d’un point d’insertion clignotant dans la première zone de saisie. Toute frappe au clavier sera placée dans cette zone.
  • La fonction focus2() est en tout point identique à la fonction focus1(), si ce n’est qu’elle donne le focus à la deuxième zone de texte.

Exécutons ce code dans un navigateur. Comme vous pouvez le voir, les deux boutons sont fonctionnels.


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

Dans cette rubrique, nous allons nous intéresser à une problématique classique : la récupération du contenu d’une balise <div>. Bien entendu, cette opération se fera à l’aide de la fonction JavaScript getElementById().

Examinons le code utilisé. Commençons par la parte HTML, située entre les lignes 21 et 27.

  • La ligne 22 définit la balise <div> div1. L’attribut contenteditable initialisé à true rend cette balise éditable (ceci est une nouveauté bien pratique du langage HTML5). En d’autres termes, son contenu peut être librement modifié par l’utilisateur.
  • Les lignes 23 à 25 mettent en place un formulaire pour héberger le bouton de commande.
  • Le bouton de commande est défini ligne 24. Le texte affiché dans le bouton est défini dans l’attribut value. Lorsque le bouton est cliqué, la fonction JavaScript popup() est exécutée.

La mise en forme de la balise <div> est définie avec quelques lignes de CSS, ente les lignes 5 et 10 :

  • La couleur d’arrière-plan est définie ligne 7 ;
  • La largeur de la division (c’est-à-dire de la balise <div>) est définie ligne 8 ;
  • Enfin, la hauteur de la division est définie ligne 9.

Il ne reste plus qu’à examiner le code JavaScript, défini entre les lignes 12 et 19. La fonction popup() est définie ligne 13. La balise <div> d’identifiant div1 est mémorisée dans l’objet objet1 ligne 15. Quant à la ligne 16, elle affiche le contenu de la balise <div> dans une boîte de message en utilisant la propriété JavaScript innerHTML.

Exécutons ce code dans un navigateur Web. Après avoir modifié le contenu de la balise <div>, nous cliquons sur le bouton de commande. Le contenu de la <div> est bien affiché dans une boîte de message.


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

Dans la rubrique précédente, vous avez appris à modifier le contenu d’une zone de texte en utilisant la fonction JavaScript getElementById(). Dans cette rubrique, je vais vous apprendre à modifier une propriété CSS avec cette même instruction.

Dans cet exemple, nous allons modifier la couleur d’arrière-plan d’une balise <div>. Pour cela, l’utilisateur entrera une couleur codée en hexadécimal codée ainsi :

#rrvvbb

rr représente la quantité de rouge (entre 0 et FF), vv la quantité de vert (entre 0 et FF) et bb la quantité de bleu (entre 0 et FF) de la couleur à utiliser.

Une fois la couleur entrée, il lui suffira de cliquer sur un bouton de commande pour modifier la couleur de la balise <div>.

Examinons le code HTML.

  • Le corps du document est défini entre les lignes 22 et 31.
  • La ligne 23 définit une balise <div> d’identifiant div1 ;
  • La ligne 24 affiche un texte pour inviter l’utilisateur à saisir une couleur codée en hexadécimal.
  • Les lignes 25 à 28 mettent en place un formulaire pour héberger la zone de texte et le bouton de commande ;
  • La ligne 26 définit la zone de texte d’identifiant saisie ;
  • Enfin, la ligne 27 définit le bouton de commande. Le texte affiché dans le bouton est “Modifier la couleur”. Lorsque le bouton est cliqué, la fonction JavaScript couleur() est exécutée.

L’allure de la balise <div> est définie avec du code CSS, entre les lignes 4 et 11 :

  • Ligne 7, la couleur de l’arrière-plan par défaut est définie à #000000. A l’ouverture de la page, la balise <div> aura donc un arrière-plan noir ;
  • Les dimensions de la balise <div> sont définies lignes 8 et 9. La largeur et la hauteur sont fixées à 200 pixels.

Pour que le code soit complet, il ne reste plus qu’à définir la fonction JavaScript couleur(),entre les lignes 12 et 19 :

  • La ligne 15 crée l’objet objet1 et l’initialise avec l’élément saisie, c’est-à-dire avec la zone de texte dans laquelle est saisi le code de couleur hexadécimal.
  • La ligne 16 crée l’objet objet2 et l’initialise avec l’élément div1, c’est-à-dire avec la balise <div> qui a été mise en place dans le début du document.
  • Quant à la ligne 17, elle affecte à la propriété backgroundColor de la balise <div> le code de couleur hexadécimal qui se trouve dans la zone de texte. A droite du signe “=“, objet1.value récupère le contenu de la zone de texte. Remarquez la syntaxe utilisée à gauche du signe “=” : objet2.style.backgroundColor.
    • objet2 correspond à l’objet lié à la balise <div> div1 ;
    • style indique que l’on s’intéresse à une propriété CSS ;
    • backgroundColor correspond à la propriété CSS background-color.

Remarque
La syntaxe de la ligne 17 n’a rien d’extraordinaire. Cependant, notez que l’accès à la propriété CSS background-color se fait via le mot clé backgroundColor. Le tiret a disparu entre les mots background et color et la première lettre du mot color est en majuscules. Une grande partie de la difficulté à accéder aux propriétés CSS en JavaScript viendra de la syntaxe à utiliser. Cependant, ne vous en faites pas trop, vous verrez que l’utilisation des bons mots clés devient vite machinale pourvu que vous pratiquiez régulièrement.

Exécutons ce code dans un navigateur. A l’ouverture de la page, la balise <div> a un arrière-plan noir. Pour le modifier, il suffit d’entrer un code hexadécimal dans la zone de texte et de cliquer sur le bouton de commande.

Pour trouver facilement le code de couleur hexadécimal d’une couleur donnée, je vous suggère d’utiliser le site http://www.code-couleur.com/.


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 :