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";
}

[mycha25]

Ça y est, cela fonctionne. Merci pour votre aide.

[javatwister]

Et un système comme ça sinon?

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<title>...</title>
 
<style>
.cadre{
        display:flex;
        align-items:center;
}
.cadre div:first-Child {
        margin:10px 50px 10px 50px;
        border:1px solid
}
.cadre input[type="radio"]{
        display:none;
}
.cadre label{
        text-decoration:underline;
        background:red;
        border:solid 1px;
        display:block;
        margin:10px;
}
.cadre input:checked + label{
        background:lime;
        text-decoration:none;
}
</style>
 
</head>
 
<body>
 
<div class="cadre">
	<div>
		<input type="radio" name="boutfirst" id="un" value="un" /><label for="un">Texte du bouton déclencheur 1</label>
		<input type="radio" name="boutfirst" id="deux" value="deux" /><label for="deux">Texte du bouton déclencheur 2</label>
		<input type="radio" name="boutfirst" id="trois" value="trois" /><label for="trois">Texte du bouton déclencheur 3</label>
	</div>
	<div>Texte par défaut</div>
</div>
<div class="cadre">
	<div>
		<input type="radio" name="boutsecond" id="quatre" value="un" /><label for="quatre">Texte du bouton déclencheur 1</label>
		<input type="radio" name="boutsecond" id="cinq" value="deux" /><label for="cinq">Texte du bouton déclencheur 2</label>
		<input type="radio" name="boutsecond" id="six" value="trois" /><label for="six">Texte du bouton déclencheur 3</label>
	</div>
	<div>Texte par défaut</div>
</div>
<div class="cadre">
	<div>
		<input type="radio" name="boutthird" id="sept" value="un" /><label for="sept">Texte du bouton déclencheur 1</label>
		<input type="radio" name="boutthird" id="huit" value="deux" /><label for="huit">Texte du bouton déclencheur 2</label>
		<input type="radio" name="boutthird" id="neuf" value="trois" /><label for="neuf">Texte du bouton déclencheur 3</label>
	</div>
	<div>Texte par défaut</div>
</div>
<div class="cadre">
	<div>
		<input type="radio" name="boutthird" id="dix" value="un" /><label for="dix">Texte du bouton déclencheur 1</label>
		<input type="radio" name="boutthird" id="onze" value="deux" /><label for="onze">Texte du bouton déclencheur 2</label>
		<input type="radio" name="boutthird" id="douze" value="trois" /><label for="douze">Texte du bouton déclencheur 3</label>
	</div>
	<div>Texte par défaut</div>
</div>
 
<script>
document.querySelectorAll("[name^=bout]").forEach((v,i)=>{
        v.addEventListener("click",()=>{
                v.parentNode.nextElementSibling.textContent=`texte ${++i} à affichage ponctuel`
        })
})
</script>
 
</body>
</html>