Discussion :

[mycha25]

Bonjour,
3 boutons. Au clic sur un bouton, un texte différent apparait à côté. Je voudrais que le style souligné du bouton cliqué disparaisse mais qu'il réaparaisse lorsque c'est un autre bouton qui est cliqué et que celui-ci à son tour ne soit plus souligné.

[mathieu]

je ne suis pas sûr d'avoir compris ce que vous voulez faire.
montrez nous le code que vous avez déjà essayé.

[mycha25]

je code d'abord le fonctionnement en css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
article div button:target{
    text-decoration:none;
}
.bouton:not(:target){
    border:none;
    font-size:1rem;
    background:none;
    text-decoration:underline;
    color:#435468;
}
article div button:hover, article div button:focus{
    cursor:pointer;
    font-style:italic;
    text-decoration:none;
}

cela masque bien la partie de texte dans le bouton qui sert de déclencheur pour faire afficher un texte (div indépendant). Mais lorsque je clique sur le deuxième bouton pour changer de texte dans le div indépendant, il faudrait que le premier reprenne son souligné. Mais il reste non souligné.
J'ai essayé avec une fonction js pour remettre tous les boutons en souligné avant de modifier celui qui est concerné mais cela ne fonctionne pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function efface(id){
    document.getElementsByTagName('button').style.textDecoration='underline';
    document.getElementByID('button').style.textDecoration='none';
}

Voici les code html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<button id="b1" class="bouton" onclick="efface('b1');affiche_text('texte 1 à affichage poncuel');"/>Texte du bouton déclencheur 1</button><br>
<button id="b2" class="bouton" onclick="efface('b2');affiche_text('texte 2 à affichage poncuel');"/>Texte du bouton déclencheur 2</button><br>
<button id="b3" class="bouton" onclick="efface('b3');affiche_text('texte 3 à affichage poncuel');"/>Texte du bouton déclencheur 3</button>

[mathieu]

je vous conseille déjà d'utiliser des classes CSS et comme ça vous aurez juste besoin de modifier la classe dans le code javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
getElementById("").className = "bouton activation"; // ce code efface la classe déjà présente donc il faut remettre "bouton" à chaque fois
getElementById("").className = "bouton desactivation";

ensuite regardez dans la console de développement de votre navigateur, vous verrez qu'il y a une erreur pour le code getElementsByTagName('button').style ...

[mycha25]

merci pour le conseil que j'ai suivi.
Si j'applique simplement au 3 premiers boutons en demandant à changer, cela fonctionne. Mais j'ai 4 ensembles de 3 boutons et je voudrai une fonction qui détecte l'id concerné, le change de classe et mette tous les autres à la classe de base. J'ai essayé ça mais ça ne fonctionne pas (les boutons ont comme id la lettre b suivie d'un numéro) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function efface(id)
{
    //var num = id;
    for(i=1;i<13;i++)
    {
        var avoir = "b" + i;
        if(id == avoir)
        {
            document.getElementById(id).className = "bouton activation";
            document.getElementById(avoir).className = "bouton desactivation";
        }
    }
}

[mathieu]

je pense que la logique dans la boucle devrait plutôt être comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
if (id == avoir) {
    document.getElementById(avoir).className = "bouton activation";
} else {
    document.getElementById(avoir).className = "bouton desactivation";
}