Un bel album photos

Le toucan
La tortue
La forêt

Le code CSS correspondant

... figure img {width :40% ; } figure figcaption {text-align : center ; } figure {display : none ; } ...

Par défaut les balises figure sont masquées ; comme chaque image et sa légende est contenue dans une balise figure les images et légendes sont masquées.

Le code HTML correspondant

... <button type ='button'>afficher images</button> <button type ='button'>masquer images</button> <figure><img src = '../images/toucan.jpg'> <figcaption>Le toucan</figcaption></figure> <figure><img src = '../images/tortue.jpg'> <figcaption>La tortue</figcaption></figure> <figure><img src = '../images/foret.jpg'> <figcaption>La forêt</figcaption></figure> ...

Comme il a été dit plus haut chaque élément img est contenu dans figure.

Le code JavaScript

Via JavaScript il faut changer la valeur d'une propriété de style !
Ici il faut que la valeur de la propriété display de chaque élément figure passe de block à none et vice versa.

Il faut donc utiliser la syntaxe : noeud.style.propriété = nouvelle valeur

... var figures = document.querySelectorAll('figure') ; // figures est un tableau qui cible toutes les balises figure var vnombre = figures.length ; // nombre d'éléments du tableau figures document.querySelectorAll('button')[0].onclick = function() { for(i = 0 ; i<= vnombre ; i++) { figures[i].style.display = 'block' ; } } // fin fonction document.querySelectorAll('button')[1].onclick = function() { for(i = 0 ; i<= vnombre ; i++){figures[i].style.display = 'none' ; } } // fin fonction ...

figures est une variable objet globale et plus précisément un tableau global qui référence toutes les balises figure.
Donc figures.length retourne le nombre de balises figure dans la page.

Si clic sur le premier noeud button appel d'une fonction anonyme qui modifie la valeur de la propriété display : display passe à "block" pour chaque élément figure.

Si clic sur le deuxième noeud button appel d'une fonction anonyme qui fait l'inverse.
Retour menu