Modifier le style des boutons au clic

Version imprimable

30/01/2021, 11h29
mycha25

Modifier le style des boutons au clic

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é.
30/01/2021, 12h27
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é.

je code d'abord le fonctionnement en css :
Code:

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:

1 2 3 4 function efface(id){ document.getElementsByTagName('button').style.textDecoration='underline'; document.getElementByID('button').style.textDecoration='none'; }
Voici les code html
Code:

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>

30/01/2021, 15h53
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:

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 ...

Modifier le style des boutons au clic

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:

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

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

Code:

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

31/01/2021, 13h13
mycha25

Modifier le style des boutons au clic

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

Et un système comme ça sinon?

Code:

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>