Problème de logique
Tu n’as aucun bogue dans ton utilisation, ton problème est un problème de pure logique. Comment retirer « toutes » les autres catégories sauf celle que je viens de réclamer ?
Une technique simple en informatique est de procéder comme suit :
Sur l’action de « afficher une catégorie », il faut d’abord penser à utiliser une action « désélectionner toutes les catégories » avant.
Ainsi au début tu as [x, x, x] par exemple (aucune catégorie sélectionnée), puis tu cliques sur la seconde (par exemple) ce qui enclenche le processus suivant :
- [x, x, x] (on met tout à vide, ce qui ne change rien dans ce cas)
- [x, o, x] (on sélectionne la seconde)
Si maintenant tu choisis la 3 ça donne :
- [x, x, x] (on met tout à vide, ce qui retire la 2)
- [x, x, o] (on sélectionne la troisième)
D’un point de vu utilisateur, la séquence pour « retirer le tout » avant d’en « sélectionner un » ne se voit pas, aussi on a simplement l’impression qu’on sélectionne une autre catégorie.
J’ai fait une réplique (fork) de ton codepen en alimentant ton JS pour répondre à ta problématique. Pour mieux le comprendre, je t’invite d’abord à prendre en note ma relecture de code.
Bonnes pratiques à suivre
Tu parles « de prise de tête ». On appel ça « complexité ». Une même chose peut-être faites de plusieurs manières, et, plus un code est « long » et « répétitif » plus il est difficile de faire des parallèles pour le lecteur/relecteur et plus il est « complexe ». Il est donc important de « factoriser » son code en utilisant des variables.
Ensuite, d’un point de vu technique, on appel la complexité cyclomatique la complexité d’un point de vu logique : une fonction est réputée plus « maintenable » si sa complexité cyclomatique est faible. http://jshint.com/ permet de tester cette complexité.
HTML
L’imbrication
Quand un élément contient des balises de type inline, il est convenable de garder le tout sur une ligne :
<li role="presentation"><a ...>Automobile</a></li>
Mais quand un élément contient des balises de type block, il est convenu de les ramener à la ligne. Les balises fermantes occupent une nouvelle ligne (note que j’ai encadré ton texte dans un
pour paragraphe).
<div class="pub-bank" id="act-bank">
<h2>
<i class="fa fa-university">BANK/ ASSURANCE</i> <i class="fa fa-university"></i>
</h2>
<p>vevevhuevhevevejvbeivevhevhueviei</p>
</div>
Balise <i>
Utilise <span> au lieu de <i> : https://blog.lesieur.name/icon-ou-la-balise-html-semantique-qui-n-existait-pas/
<span class="fa fa-university">BANK/ ASSURANCE</span> <span class="fa fa-university"></span>
Casse
Par convention les noms de classes et d’id utilise la kebab-case, ex. je-suis-un-id
id="bouton"
id="button-2" <!-- ou id="button2" // pas de majuscule -->
Hors mis ça, ton nommage n’est pas assez pertinent. Il vaut mieux appeler un bouton button-bank plutôt que button-2
JavaScript
Point virgule, semi-colon.
Les expressions JavaScript se terminent par un semi-colon quand elles sont toutes sur la même ligne. Par convention, quand elles sont sur plusieurs lignes, on conseil tout de même de les mettres pour « apprendre » à bien différentier les expressions.
document.querySelector("#bouton").onclick = function() {
...
}; // <-- point virgule à la fin de cette « expression d'affectation à gauche ».
Indentation
On indente chaque contenu de bloc pour la relecture :
document.querySelector("#bouton").onclick = function() {
if (window.getComputedStyle(document.querySelector('#activation-auto')).display=='none'){
document.querySelector("#activation-auto").style.display="block";
} else {
document.querySelector("#activation-auto").style.display="none";
}
};
Aération
On place des espaces entre les différents éléments de syntaxe
if (window.getComputedStyle(document.querySelector('#activation-auto')).display == 'none') {
document.querySelector("#activation-auto").style.display = "block";
Références
On rassemble les références au DOM derrière des variables.
var bouton1 = document.querySelector("#bouton"),
activationAuto = document.querySelector("#activation-auto");
bouton1.onclick = function() {
if (window.getComputedStyle(activationAuto).display == 'none'){
activationAuto.style.display = "block";
} else {
activationAuto.style.display = "none";
}
};
Égalité stricte
On vérifie la valeur et le type de la valeur ===
if (window.getComputedStyle(activationAuto).display === 'none') {
Bloc conditionnel vs Expression conditionnelle
Tu fais deux fois la même chose à la suite, en gros dans ce pend de code
// Tout le code de ICI...
document.querySelector("#Bouton3").onclick = function() {
if (window.getComputedStyle(document.querySelector('#act-crypto')).display=='none'){
document.querySelector("#act-crypto").style.display="block";
} else {
document.querySelector("#act-crypto").style.display="none";
}
};
// ... à LÀ est inutile
// Puisque tu remplaces la valeur de `document.querySelector("#Bouton3")` ure seconde fois
// dans ton code, ce ne sont que ces parties qui sont réellement prisent en compte.
document.querySelector("#Bouton3").onclick = function() {
document.querySelector("#act-crypto").style.display = (window.getComputedStyle(document.querySelector('#act-crypto')).display=='none') ? "block" : "none";
};
Ne mélange pas les deux approches dans un même type de contrôle, c’est extrêmement difficile à appréhender à la relecture. Les deux structures suivante produiront le même résultat.
Ça c’est un Bloc conditionnel
if (window.getComputedStyle(activationAuto).display === 'none') {
activationAuto.style.display = "block";
} else {
activationAuto.style.display = "none";
}
Ça c’est une Expression conditionnelle
activationAuto.style.display = (window.getComputedStyle(activationAuto).display === 'none') ? "block" : "none";
Soit tu utilises l’opérateur ternaire d’expression a ? b : c, soit tu utilise le bloc conditionnel de contrôle de flux if (a) { b } else { c }. Le choix de l’un ou de l’autre peut se faire ainsi :
Mes équipes sont débutantes en JS ?
OUI -> `Bloc conditionnel`
NON -> Dans la condition, je n'ai qu'une seule expression à effectuer ?
OUI -> `Expression conditionnelle` possible
NON -> `Bloc conditionnel`
Propriété on* VS propriété addEventListener
Utilise toujours addEventListener, dans ton code. onclick = a est la même chose que <a ... onclick="a">.... Le problème ici c’est que tu bloques l’action du clique sur cet élément pour tous les autres développeurs car il ne peux y avoir que « une source d’alimentation pour onclick ». Plus tard si quelqu’un ré-affecte cette valeur, il détruira ton action à toi.
Il faut donc créer toi même des « écouteur d’évènement » (Event Listener)
var bouton1 = document.querySelector("#bouton"),
activationAuto = document.querySelector("#activation-auto");
bouton1.addEventListener("click", function() { // <-- on utilise des écouteurs d'évènement pour « empiler » les comportements au clique plutôt que de les écrasers
if (window.getComputedStyle(activationAuto).display == 'none'){
activationAuto.style.display = "block";
} else {
activationAuto.style.display = "none";
}
});
Solution
Tu trouverras un code fonctionnel pour tes trois premiers liens dans le codepen :
En voici le détail.
// Tu indiques au relecteur ou à toi même, avec quoi tu vas travailler
var boutonAuto = document.querySelector("#Bouton"),
boutonBank = document.querySelector("#Bouton1"),
boutonCom = document.querySelector("#Bouton2"),
activationAuto = document.querySelector('#activation-auto'),
activationBank = document.querySelector('#act-bank'),
activationCom = document.querySelector('#act-com');
// Tu crées une fonction pour fermer tous les affichages
function unactivation() {
activationAuto.style.display = "none";
activationBank.style.display = "none";
activationCom.style.display = "none";
}
// Puis tu crées tes écouteurs d'évènement pour ouvrir chaque section.
// AUTO
// Donc on cliquant sur ce bouton
boutonAuto.addEventListener("click", function() {
// Tu vas fermer tout ce qui était déjà ouvert
unactivation();
// Puis ouvrir uniquement cette section
activationAuto.style.display = "block";
});
// BANK
boutonBank.addEventListener("click", function() {
unactivation();
activationBank.style.display = "block";
});
// COMMERCE
boutonCom.addEventListener("click", function() {
unactivation();
activationCom.style.display = "block";
});
Je te laisse faire la suite.
Mon ressenti
Tu ne semble pas maîtriser ce que tu manipules, même sans parler de bonne pratique. Il me semble que c’est un problème de compréhension fondamentale des mécanismes du JavaScript et de son API DOM.
On sent bien que tu as accrochés des morceaux à droite à gauche comme tu pouvais.
Si tu as le temps, bosse tes fondamentaux : il y a des sites comme https://www.javascript.com/ pour apprendre convenablement le JavaScript.
J’ai des offres d’aide à l’apprentissage de bonne pratique et d’utilisation du JavaScript / HTML / CSS. Je peux aussi faire de la relecture de code. si tu es intéressé MP moi.
Bon courage !
