aide pour alléger mon code simple mais long [Résolu]

[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 :

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 :

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

Ensuite j'ai le javascript :

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

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

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

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

Code :

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 :

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

et ta fonction javascript :

Code :

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 :

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.