Au sein du <div id="output"> se trouve un élément <aside> et un <button>. Attachez une événement sur le <button> de manière à masquer l'<aside> s'il est affiché, et de l'afficher s'il est masqué — ce que l'on appele généralement un toggle.
Écrivez le code qui permet de faire ça. Dès que c'est fait, cliquez sur le bouton Exécuter le script pour exécuter le code.
Écrivez votre code
Console d'erreurs
Pas d'erreurs d'exécution ou de syntaxe
Rendu #output
Source HTML
Solutions
Le principe est de masquer ou d'afficher l'élément <aside> en utilisant la propriété CSS display. On regarde d'abord ce que vaut la propriété, et puis on la modifie :
En ce qui concerne la manière d'attacher cet événement, en voici plusieurs ci-après.
Pourquoi d'abord tester si display vaut none ?
En réalité, dans l'exemple ici, aucun style display n'est défini, donc lors du premier clic sur le bouton, la propriété display retournera une chaîne de caractères vide, donc le script masquera l'élément.
Avec DOM-0
Le script étant tellement simple et le bouton n'étant destiné qu'à ça, utiliser le DOM-0 n'est pas un problème :
var button = document.querySelector("#output > button");
button.onclick = function() {
var aside = this.nextElementSibling; // Le this pointe sur le bouton, et on prend l'élément suivant
aside.style.display = (aside.style.display === 'none') ? 'block' : 'none';
};
Avec addEventListener()
Et bien évidemment addEventListener(), à utiliser en toutes circonstances !
var button = document.querySelector("#output > button");
button.addEventListener("click", function() {
var aside = this.nextElementSibling; // Le this pointe sur le bouton, et on prend l'élément suivant
aside.style.display = (aside.style.display === 'none') ? 'block' : 'none';
}), false);
Un commentaire ? Un bug ? Contactez-moi !
Vous souhaitez proposer une autre solution ?
Un autre exercice ou une précision ?
Vous avez rencontré une erreur ?
Un exercice ne fonctionne pas ?
OpenClassrooms
Commentez directement dans le sujet dédié aux exercices
