Discussion :

[elect31]

Bonjour à tous
Je suis archi débutant en javascript mais essaye de comprendre ce que je fais.
J'utilise un script trouvé sur le net pour afficher une div en cliquant sur une carte mappée.
Mon exemple est visible ici
Dans mon exemple, j'ai deux area, une rouge et une verte. Si je clique sur rouge, une div s'affiche et si je clique sur vert une autre div s'affiche par dessus mais ne me ferme pas la première.
Le code javascript:

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function switchDiv(id)
{
divInfo = document.getElementById(id);
if (divInfo.style.display == 'none')
divInfo.style.display = 'block';
else
divInfo.style.display = 'none';
}
</script>

les deux div :

Code :

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

1
2
<div class="rouge" id="rouge" style="display: none;"><span class="motcle">Les établissements du rouge: </span></div>
<div class="vert" id="vert" style="display: none;"><span class="motcle">Les établissements du vert:</span></div>

J'ai bien pensé à un boucle du genre for ...each qui testerait tous les divInfo.style.display mais ne sais pas la rédiger. De plus, j'ai lu que les boucles for...each ne pouvaient plus être utilisée maintenant.
Je ne sais pas comment faire.
Merci de votre aide.

[paoli121]

Si je comprends bien ce que tu veux faire, tu veux afficher le div a id (rouge) avec l'area rouge et l'autre avec l'area vert sans changer l'etat de l'un a l'execution de l'autre. si c'est comme ça voici ce que je te propose :

- 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
<script>
	var areaVert = document.getElementById("areaVert"), areaRouge = document.getElementById("areaRouge"), divAreaVert = document.getElementById("vert"), divAreaRouge = document.getElementById("rouge");
 
	areaVert.addEventListener("click",function(){
		changerEtat(divAreaVert);
	})
	areaRouge.addEventListener("click",function(){
		changerEtat(divAreaRouge);
	})
	function changerEtat(elementDiv){
		if(elementDiv.style.display != "none"){
			elementDiv.style.display = "none";
		}
		else{
			elementDiv.style.display = "block";
		}
	}
</script>

Html :

Code :

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

1
2
3
4
<area id ="areaVert"></area>
<area id ="areaRouge"></area>
<div class="rouge" id="rouge" style="display: none;"><span class="motcle">Les établissements du rouge: </span></div>
<div class="vert" id="vert" style="display: none;"><span class="motcle">Les établissements du vert:</span></div>

[NoSmoking]

Bonjour,
@paoli121 :
• Oublie <script type="javascript"> pour mettre simplement <script>.

• Attention également à la casse

Code :

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

divAreaVert = document.getElementById("vert");  // et non Vert

[paoli121]

ok merci