Médiaforma

getElementsByName

Print Friendly

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.

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

No comments yet.

Leave a Reply