JavaScript select onChange - div [Résolu]

[haNjo]

Bonjour,

J'ai déjà parcouru pas mal de thread, mais une interrogation subsiste pour moi dans mon code. Je ne suis pas un habitué du js

Voici mon objectif (très simple):
J'ai un bouton select, en fonction du choix j'affiche un div ou un autre sans valider quoi que ce soit -> je sélectionne, ça s'affiche.

Voici mon code:
Javascript:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
	function changementType() {
		var ville = document.getElementById("ville").value;
		if (ville == "mons")	{
		document.getElementById("infoMons").style="display:block";
		document.getElementById("infoBinche").style="display:none";
		} 
		else {
		document.getElementById("infoMons").style="display:none";
		document.getElementById("infoBinche").style="display:block";
		}
</script>

Et le select ainsi que les en-têtes des div:

Code :

1
2
3
4
5
6
7
8
 
<select name="ville" id="ville" onchange="changementType();">
	<option value="mons">Mons</option>
	<option value="binche">Binche</option>
</select>
<div id="infoMons" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px; display:none;"></div>
 
<div id="infoBinche" style=" margin-top: 10px; font-size: 0.9em; margin-left: 20px; display:none;"></div>

J'ai l'impression que mon code n'a aucun effet.

Est-ce que j'utilise mal le script js ou mon code est totalement erroné?

Merci de votre attention.

hNj

[galerien69]

salut,

quasi good :

Code :

document.getElementById("infoMons").style.display="block";

tu as également oublié de fermer une accolade pour ta fonction changementType.

[haNjo]

Parfait, un grand merci

[haNjo]

Bonjour,

J'ai une question vis-à-vis du même style de script. J'ai modifié mon script pour qu'il puisse afficher ou cacher des div via des liens. J'aimerai maintenant que ce script permette de cacher le div afficher lorsque je clique sur un autre lien. Donc qu'on ne puisse avoir qu'un seul div affiché à la fois.

Voici mon script js:

Code :

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
	function visibilite(thingId) { 
		var targetElement; 
		targetElement = document.getElementById(thingId) ; 
		if (targetElement.style.display == "none") 	{ 
			targetElement.style.display = "" ; 	} 
		else { 
			targetElement.style.display = "none" ; } 
	}
		</script>

Et mes div + boutons

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
<a id="nom" value="monsInfo" href="javascript:visibilite('infoMons');" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px">Contact</a>
<div id="infoMons" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px; display: none;"></div>
 
<a id="nom" value="monsHoraire" href="javascript:visibilite('horaireMons');" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px">Horaire</a>
<div id="horaireMons" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px; display: none;"></div>
 
<a id="nom" value="bincheInfo" href="javascript:visibilite('infoBinche');" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px">Contact</a>
<div id="infoBinche" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px; display:none;"></div>
 
<a id="nom" value="bincheHoraire" href="javascript:visibilite('horaireBinche');" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px">Horaire</a>
<div id="horaireBinche" style=" margin-top: 10px; font-size: 0.9em; margin-left: 20px; display:none;">

Faut-il beaucoup modifier?

Merci!

[galerien69]

non,

il suffit que tu caches tous les div (sauf celui que tu veux afficher éventuellement), et après tu affiches celui que tu veux afficher.

[haNjo]

Envoyé par galerien69

non,

il suffit que tu caches tous les div (sauf celui que tu veux afficher éventuellement), et après tu affiches celui que tu veux afficher.

Ils sont tous "hidden", mais lorsque j'ouvre par exemple le div "monsInfo", et que par après j'ouvre le div "monsHoraire", j'aimerai que le div "monsInfo" se referme automatiquement.

Y a-t-il quelque chose à modifier?

[galerien69]

ben non ils sont pas tous hidden tu le dis toi même :

j'ouvre par exemple le div "monsInfo"

Il faut que à chaque fois que tu affiches un div, tu caches tous les autres.
Actuellement quand tu affiches un div, tu en caches un autre. Ben là tu les caches tous sauf si c'est celui que tu désires afficher.

Et après tu l'affiches.

Code :

1
2
3
4
5
6
7
8
9
function visibilite(thingId) {
 pour tous les div qu'on veut masquer/afficher
  si div.id!=thingId
   //c'est un div à cacher
   div.style.display="none"
 fin pour
 //et tu affiches ton div adoré
 document.getElementById(thingId).style.display='';
}

A la syntaxe près

[haNjo]

Merci!
J'ai abouti à ceci comme script js:

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
 
<script type="text/javascript">
	var elmtOuvert = "";
	var nOuvert = 0;
 
	function switchDiv(n) {  
		var id;
		if (nOuvert==n)
			n = 0;
		switch(n) { 
			case 0:
				id = "";
				break;
			case 1:
				id="infoMons";
				break;
			case 2:
				id="horaireMons";
				break;
			case 3:
				id="infoBinche";
				break;
			case 4:
				id="horaireBinche";
				break;
			}  
		if (elmtOuvert!="")
			document.getElementById(elmtOuvert).style.display="none";
		if (id!="")
			document.getElementById(id).style.display="block";
 
		elmtOuvert = id;
		nOuvert = n;
	}
</script>

Et mes lien/div sont construits comme ceci:

Code :

1
2
3
 
<a id="nom" value="monsInfo" href="javascript:switchDiv(1);" class="linkinfo" >Contact</a>
<div id="infoMons" style="font-size: 0.9em; margin-top: 10px; margin-left: 40px; display: none; color: white"></div>

Merci pour le coup de main

[haNjo]

Je continue dans ma recherche d'amélioration de mon script.

Je suis entrain d'essayer d'insérer (devant le texte du lien permettant d'afficher ou masquer un div) une image [+] lorsque le div est masqué, et [-] lorsqu'il est affiché.

J'ai trouvé des solutions avec des buttons, mais moi je désire simplement rajouter une image et je suppose qu'en changeant le lien de la source (src=""), ca peut fonctionner. J'ai voulu implémenter cela et donc insérer une modification par id, mais voilà...

J'ai tenté de nommer chacune de mes images avec un id (donc 4, vu que j'ai 4 liens qui permettent d'afficher 4 div), j'ai rajouté dans mon switch une variable idimg="" la valeur de l'id de mon image en fonction du lien. Ensuite je me suis dit "je vais faire changer la valeur de la source dans mes conditions", mais la j'ai totalement bloqué...

Si vous avez des liens ou des indications/explications de solutions, je suis preneur!

[galerien69]

quel est ton html et ton js?

ps : j'opterais plutot pour un tableau de div plutot que pour un switch.
Egalement plutot utiliser l'evenement onclick sur tes liens, et dans le href stocker #idDuDiv. De fait tu enquilles onclick=switchDiv(this.id); et tu n'auras plus qu'à récupérer l'id du div souhaité : id.substring(1);

[Eric2a]

Salut,

+1 galerien69.

Ca ressemblerait à un truc du genre...

Code html :

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
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<style type="text/css" media="screen">/*<![CDATA[*/
		.lien {
			padding:0;margin:10px 0 0 20px;font-size:0.9em;
		}
		.tab {
			padding:8px;margin:0 0 0 20px;width:512px;border:1px #ccc dashed;
			display:none;
		}
		/*]]>*/
	</style>
	<script type="text/javascript">//<![CDATA[
		var tabs=function(){
			var bloc=[];
 
			return{
				select:function(url){
					var i,id=url.split('#')[1];
					for(i in bloc)bloc[i].style.display=(i==id)?'block':'none';
					return false;
				},
				init:function(){
					var i,lnk,tab,elt=document.getElementById('nav');
					lnk=elt && elt.getElementsByTagName('a');
					if(!lnk)return;
 
					for(i=0;i<lnk.length;i++){
						url=lnk[i].href;
						if(url){
							tab=url.split('#');
							if(tab.length==2&& tab[1]!=''){
								id=tab[1];
								elt=document.getElementById(id);
								id=(elt && elt.className=='tab')?id:false;
								if(id){
									bloc[id]=elt;
									lnk[i].onclick=function(){return tabs.select(this.href);};
								}
							}
						}
					}
				}
			}
		}();
 
		window.onload=tabs.init;
		//]]>
	</script>
</head>
<body>
	<div id="nav">
		<a href="#un" class="lien">Un</a>
		<a href="#deux" class="lien">Deux</a>
		<a href="#trois" class="lien">Trois</a>
		<a href="#quatre" class="lien">Quatre</a>
	</div>
	<div id="tabs">
		<div class="tab" id="un">Premier bloc</div>
		<div class="tab" id="deux">Deuxième bloc</div>
		<div class="tab" id="trois">Troisième bloc</div>
		<div class="tab" id="quatre">Quatrième bloc</div>
	</div>
</body>
</html>

[haNjo]

Merci messieurs mais la, j'suis perdu

Je comprends une majeure partie du code je comprends, mais ne voit pas en quoi c'est "mieux" que mon switch? :s

Je vous mets la page avec tout ce qu'il faut pour voir ce que j'ai

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
 
<html>
    <head>
	<script type="text/javascript">
		var elmtOuvert = "";
		var nOuvert = 0;
		function switchDiv(n) {  
			var id;
			if (nOuvert==n)
				n = 0;
			switch(n) { 
				case 0:
					id = "";
					break;
				case 1:
					id="infoMons";
					break;
				case 2:
					id="horaireMons";
					break;
				case 3:
					id="infoBinche";
					break;
				case 4:
					id="horaireBinche";
					break;
				}  
			if (elmtOuvert!="")
			document.getElementById(elmtOuvert).style.display="none";
			if (id!="")
				document.getElementById(id).style.display = "block";
 
			elmtOuvert = id;
			nOuvert = n;
		}
		</script>
	</head>
    <body>
	<div id="main">
		<div class="columnLeft">
			<div class="headerLeft" style="width: 100%;height:200px;">
			</div>
			<a id="nom" value="monsInfo" href="javascript:switchDiv(1);" class="linkinfo">Contact</a>
			<div id="infoMons" style="font-size: 0.9em; margin-top: 10px; margin-left: 40px; display: none; color: white">
			</div>
			<br /><br />	
			<a id="nom" value="monsHoraire" href="javascript:switchDiv(2);" class="linkinfo">Horaire</a>
			<div id="horaireMons" style="font-size: 0.9em; margin-top: 10px; margin-left: 40px; display: none; color: white">
			</div>
			<br />
			<a id="nom" value="bincheInfo" href="javascript:switchDiv(3);" class="linkinfo">Contact</a>
			<div id="infoBinche" style="font-size: 0.9em; margin-top: 10px; margin-left: 40px; display: none; color: white">
			</div>
			<br /><br >
			<a id="nom" value="bincheHoraire" href="javascript:switchDiv(4);" class="linkinfo">Horaire</a>
			<div id="horaireBinche" style="font-size: 0.9em; margin-top: 10px; margin-left: 40px; display: none; color: white">
			</div>
		</div>			
	</div>
    </body>	
</html>

J'aimerais juste ajouter quelque chose du style

Code :

1
2
 
<img src="imges/plus.png" id="???">

à l'intérieur de mes balises <a></a> et que celle-ci change en "images/moins.png" lorsque je click sur le lien et cela se produisant pour chaque lien (une image par lien)

En ajoutant une référence dans mon switch, je pourrais changer la valeur de la source des images, non?

Merci à vous!

[galerien69]

pour reprendre mon poste d'avant, le href du lien a du sens de pointer vers le div parce que c'est le contenu désiré.

L'image est plus un élément annexe (enfin l'un ou l'autre). Donc c'est pas naturel de mettre un "truc" dans a qui va référencer l'image qu'on souhaite afficher.

Tu peux nommer tes images en correspondance avec des div.
Côté javascript, tu fais simplement quelquechose comme :

Code :

1
2
3
4
var imgs={
 horaireMons:'/monCheminVersLimageMons',
 monBinche:'/idemVersBinche'
};

c'est un tableau associatif (un objet en fait, mais on peut voir ca comme un tableau associatif).
Du coup dans ton switch, lorsque tu affiches lelement, tu changes également la source :
document.getElementById(myImageId).src = imgs[id];//avec id qui vaut par exemple horaireMons.

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
 
<html>
    <head>
	<script type="text/javascript">
		var elmtOuvert = "";
		var nOuvert = 0;
		//MODIFICATIONS
		var myImageId='myImage';//id of the image we want to change src
		var imgs={
     horaireMons:'http://www.planete-brico.com/img/super/_power_ranger_rouge.jpg',
     infoBinche:'http://upload.kiweo.com/forum/f_t1190638125_h714.jpg',
     infoMons:'http://perlbal.hi-pi.com/blog-images/20507/gd/1171537036/Power-Ranger-Bleu.jpg',
     horaireBinche:'http://9b.img.v4.skyrock.net/9bc/ninjaranger/pics/1736985688.jpg'
    };
    //END
		function switchDiv(n) {  
			var id;
			if (nOuvert==n)
				n = 0;
			switch(n) { 
				case 0:
					id = "";
					break;
				case 1:
					id="infoMons";
					break;
				case 2:
					id="horaireMons";
					break;
				case 3:
					id="infoBinche";
					break;
				case 4:
					id="horaireBinche";
					break;
				}  
			if (elmtOuvert!="")
			document.getElementById(elmtOuvert).style.display="none";
			if (id!=""){
  			document.getElementById(id).style.display = "block";
 
		//MODIFICATIONS
  			document.getElementById(myImageId).src=imgs[id];
    //END
			}
 
			elmtOuvert = id;
			nOuvert = n;
		}
		</script>
	</head>
    <body>
      <img id="myImage" src="http://www.defenders.org/images/thumbs_general/panda_50x50.jpg" width="100" height="100"/>
			<a id="nom" value="monsInfo" href="javascript:switchDiv(1);" class="linkinfo">monsInfo</a>
			<a id="nom" value="bincheInfo" href="javascript:switchDiv(3);" class="linkinfo">bincheInfo</a>
			<a id="nom" value="bincheHoraire" href="javascript:switchDiv(4);" class="linkinfo">binchHoraire</a>
  		<a id="nom" value="monsHoraire" href="javascript:switchDiv(2);" class="linkinfo">monsHoraire</a>
 
			<div id="horaireMons" style="display: none">a</div>
			<div id="infoMons" style="display: none">b</div>
			<div id="infoBinche" style="display: none">c</div>
			<div id="horaireBinche" style="display: none">d</div>
 
    </body>	
</html>

Au niveau du switch c'est de manière générale à éviter pour les raisons suivantes :
Problème de syntaxe : si tu oublies un break par exemple, tu executes toutes les alternatives suivantes...
C'est également un probleme de factorisation du code. Dans ton cas ca va (a peu près) parce que tu mets la logique derriere (document.getElementBy(idDefiniDansLeSwitch)).
Néanmoins, tu en fais un alors qu'il sert à rien :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var elmtOuvert = "horaireMons";
		//MODIFICATIONS
		var myImageId='myImage';//id of the image we want to change src
		var imgs={
     horaireMons:'http://www.planete-brico.com/img/super/_power_ranger_rouge.jpg',
     infoBinche:'http://upload.kiweo.com/forum/f_t1190638125_h714.jpg',
     infoMons:'http://perlbal.hi-pi.com/blog-images/20507/gd/1171537036/Power-Ranger-Bleu.jpg',
     horaireBinche:'http://9b.img.v4.skyrock.net/9bc/ninjaranger/pics/1736985688.jpg'
    };
    //END
		function switchDiv(id) {  
			var id = id.split('#')[1];//horaireBinche par exemple
			document.getElementById(elmtOuvert).style.display="none";
			document.getElementById(id).style.display = "block";    
			document.getElementById(myImageId).src = imgs[id];    
 			elmtOuvert = id;
 			return false;
		}
      <img id="myImage" src="http://www.defenders.org/images/thumbs_general/panda_50x50.jpg" width="100" height="100"/>
			<a id="nom" value="monsInfo" href="#horaireMons" onclick="switchDiv(this.href)" class="linkinfo">monsInfo</a>
			<a id="nom" value="bincheInfo" href="#infoMons" onclick="switchDiv(this.href)"  class="linkinfo">bincheInfo</a>
			<a id="nom" value="bincheHoraire" href="#infoBinche" onclick="switchDiv(this.href)"  class="linkinfo">binchHoraire</a>
  		<a id="nom" value="monsHoraire" href="#horaireBinche" onclick="switchDiv(this.href)"  class="linkinfo">monsHoraire</a>

Remarque : tes a ont le même id, c'est pas bien.

[haNjo]

Bonjour,

Merci de vos réponses complètes, même si elles ne sont pas toujours clair pour moi. Je vais essayer de finir ce script avec mon switch, je regarderai pour le passer en tableau quand celui-ci fonctionnera!

J'ai un peu avancé, il me reste juste à pouvoir revenir à mon image initial.

Je réexplique vite fait le truc car je sais pas si j'ai été clair:

Lien initial:

[+] Lien1
[+] Lien2

Lorsque je clique sur Lien1:

[-] Lien1
Blablabla
[+] Lien2

Quand je reclique sur Lien1, la <div> contenant "Blablabla" passe bien en hidden, mais mon image devant reste la même:

[-] Lien1
[+] Lien2

Et une fois que j'ai ouvert et ensuite fermé le Lien1, je ne peux plus rien faire avec sauf si je clique d'abord sur un autre lien.

Voici mon script

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
 
var elmtOuvert = "";
var nOuvert = 0;
 
function switchDiv(n) {  
	var id;
	var ida;
	var idimg;
 
	if (nOuvert==n)
		n = 0;
 
	switch(n) { 
		case 0:
			id = "";
			ida= "";
			idimg = "images/plus.png";
			break;
		case 1:
			id = "infoMons";
			ida = "cMons";
			idimg = "imgContactMons";
			break;
		case 2:
			id = "horaireMons";
			ida = "hMons";
			idimg = "imgHoraireMons";
			break;
		case 3:
			id = "infoBinche";
			ida = "cBinche";
			idimg = "imgContactBinche";
			break;
		case 4:
			id = "horaireBinche";
			ida = "hBinche";
			idimg = "imgHoraireBinche";
			break;
		}  
	if (elmtOuvert!="") {
		document.getElementById(elmtOuvert).style.display = "none";
	}
 
	if (id!="") {
		document.getElementById(id).style.display = "block";
		// document.getElementById(idimg).src = "images/moins.png";
	}
 
	document.getElementById(idimg).src = (document.getElementById(idimg).src=="images/plus.png" ) ? "images/plus.png" : "images/moins.png"; 
 
	elmtOuvert = id;
	nOuvert = n;
}

Lien + Div

Code :

1
2
3
 
<a id="cMons" value="monsInfo" href="javascript:switchDiv(1);" class="linkinfo"><img id="imgContactMons" src="images/plus.png"> Contact</a>
<div id="infoMons" display: none;">

Questions:
1. Pourquoi l'image ne change-t-elle pas lorsque la source vaut "images/moins.png" ?
2. Pourquoi je ne peux ouvrir et fermer "indéfiniment" un lien sans devoir interagir avec autre chose?

P.S: La question 2 ne se pose pas lorsque je retire le code permettant de changer l'image, à savoir:

Code :

1
2
 
document.getElementById(idimg).src = (document.getElementById(idimg).src=="images/plus.png" ) ? "images/plus.png" : "images/moins.png";

J'ai bientôt fini de vous ennuyer =)

[galerien69]

une première raison est que si tu as clique deux fois sur le même lien, alors tu es dans le cas n=0, donc id vaut img/plus.png, ce qui est pas un id valide.
document.getElementById(idImg) lance alors une exception, et c'est mort.

J'espère que tu te rends compte tout de même que le switch fait perdre des cheveux.

Mis à part, tu peux utiliser console.log(idimg) sous firefox, si tu installes lextension firebug. C'est extremement utile!

[NoSmoking]

Envoyé par haNjo

Questions:
1. Pourquoi l'image ne change-t-elle pas lorsque la source vaut "images/moins.png" ?
2. Pourquoi je ne peux ouvrir et fermer "indéfiniment" un lien sans devoir interagir avec autre chose?

P.S: La question 2 ne se pose pas lorsque je retire le code permettant de changer l'image, à savoir:

Code :

les comparaisons de la forme ? : s’interprètent de la façon suivante

Code :

CONDITION ? SI VRAI : SI FAUX

regardes avec cet exemple

Code :

alert( true ? 'VRAI' : 'FAUX');

[haNjo]

Je pense que ma comparaison est correcte, du moins elle change correctement, et lorsque je fait le test avec une alert avant ma condition, il affiche bien "images/plus.png"
Et après, "images/moins.png".

@Galerien: Je comprends la prise de tête un peu inutile du switch, surtout avec mon case 0. Je suppose que c'est dans celui-ci que je dois travailler pour résoudre le problème. Il faudrait que je puisse récupérer dans mon case 0 la valeur d'id du lien sur lequel je clique pour que le test puisse être vérifié à la fin de la fonction?

[galerien69]

Code :

document.getElementById(idimg)

c'est pas une question de test (enfin, si, mais ca vient après). Ya pas de question d'id du lien.
Tu as idimg qui est INVALIDE.

Donc idimg est invalide quand n=0, c'est à dire quand tu as cliqué sur le même lien.

Donc ici on s'arrête et on réfléchit :
pourquoi tu as plusieurs idImage.
Si tu as plusieurs images, c'est pour en cacher certains et afficher une.
Si tu en as qu'une, c'est pour changer sa source.

La tu as plusieurs idImage dans ton switch, mais tu n'as qu'une seule image .

Donc soit tu te dis je mets 4 images et j'affiche celle que je veux en conséquence et je masque les autres, soit tu changes la source de l'image, mais tu gardes un id fixe, quelquesoit le lien sur lequel tu as cliqué.

[haNjo]

J'avais au début pensé mettre un idImage unique, mais après je me suis demandé comment il allait identifier l'image à changer? Pour c'est en faisant un "onclick=changeImg(this)" mais je ne mets pas d'onclick sur l'image car celle-ci doit pouvoir changer que j'appuye sur le lien ou sur l'image elle-même.

Tu vois ce que je veux dire?

[galerien69]

ben ui. Toujours est-il que tu as une seule image avec 4 ID différents...

chui d'accord que c'est bien d'apprendre par l'erreur, mais bon, pour ma part ca m'intéresse plus du tout. On continue à faire du caca sachant pertinemment (enfin je pense que tu vois quand même que ca parait inutilement compliqué) qu'on fait un truc bancal et sale.

Donc bon, pour ma part, je passe la main aux autres.