Discussion :

[tuco_benedicto]

Bonjour à tous,

J'ai un calendrier d'une quarantaine de jours, je veux qu'en cliquant sur un jour du calendrier apparaisse un texte unique pour chaque jour et changer la couleur du jour sélectionné.

Pour faire cela j'ai donc mes jours :

Code :

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

1
2
3
4
5
6
 
<a href="#" onclick="showHide1()" id="j_1">1</a>
<a href="#" onclick="showHide2()" id="j_2">2</a>
<a href="#" onclick="showHide3()" id="j_3">3</a>
<a href="#" onclick="showHide4()" id="j_4">4</a>
...

Donc en cliquant sur jour 1, ça déclenche showHide1(), ...

Les textes :

Code :

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

1
2
 
<div id="1" style="display:none;"> texte du jour 1 </div> ...

Ensuite j'ai le javascript :

Code :

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
 
function showHide1() {
	document.getElementById('1').style.display = ''; 
        document.getElementById('j_1').style.background = 'red';
 
        document.getElementById('2').style.display = 'none';
        document.getElementById('j_2').style.background = 'black';
 
        document.getElementById('3').style.display = 'none';
        document.getElementById('j_3').style.background = 'black';
 
        ...
}
 
function showHide2() {
	document.getElementById('1').style.display = 'none';
        document.getElementById('j_1').style.background = 'black';
 
        document.getElementById('2').style.display = '';
        document.getElementById('j_2').style.background = 'red';
 
        document.getElementById('3').style.display = 'none';
        document.getElementById('j_3').style.background = 'black';
 
        ...
}
 
...

Je pense que vous commencez à comprendre le problème : la longueur du code final !

En effet, en cliquant sur un jour, il ne faut pas seulement que ça "l'active" en rendant visible le texte et en changeant la couleur mais il faut aussi que ça "désactive" tous les autres jours en rendant invisible les textes et en mettant une couleur différente du jour sélectionné.

Donc je vous ai dit que j'avais une quarantaine de jours alors visualisez la longueur du code !

Il faut 40 fonctions showHide() et dans chacune de ses fonctions il faut 40 lignes pour désactiver tous les jours sauf un.

Merci de m'aider si vous avez une solutions permettant de faire beaucoup moins de lignes.

[Auteur]

bonjour,

Code :

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

<div id="1" style="display:none;"> texte du jour 1 </div>

Déjà je te déconseille vivement de donner un nombre en tant que id d'un élément.

Donc pour la suite, je vais appeler les div en question divj. Par exemple :

Code :

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

<div id="divj_1" style="display:none;"> texte du jour 1 </div>

Dans un premier temps tu peux réaliser une boucle :

Code :

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

1
2
3
4
5
6
7
 
var i;
for (i=1; i<=31; i++)
{
        document.getElementById("divj_"+i).style.display = "none";
        document.getElementById("j_"+i).style.background = "black";
}

ensuite tu peux transmettre le id de tes liens aux fonctions :

Code html :

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

1
2
 
<a href="#" onclick="showHide(this.id)" id="j_1">1</a>

et ta fonction javascript :

Code :

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

1
2
3
4
5
6
 
function showHide(leJour)
{
	document.getElementById("div" + leJour).style.display = ''; 
        document.getElementById(leJour).style.background = 'red';
}

Au final tu as une fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function showHide(leJour)
{
	var i;
	for (i=1; i<=31; i++)
	{
	        document.getElementById("divj_"+i).style.display = "none";
	        document.getElementById("j_"+i).style.background = "black";
	}
 
	document.getElementById("div" + leJour).style.display = ''; 
        document.getElementById(leJour).style.background = 'red';
}

[tuco_benedicto]

grand merci ça marche très bien.