Enchainement de fonctions javascript

Version imprimable

Bonjour,

j'ai un problème avec l'utilisation de fonctions, je voudrai savoir comment utiliser 2 fonctions à la suite en cliquant sur un même bouton.

J'ai deux boutons, chacun affiche un div quand je clique dessus, mais je voudrai que quand je clique sur le premier bouton, le div associé au deuxieme bouton se cache, et quand je clique sur le deuxieme bouton, le div associé au premier se cache

de facon à n'avoir qu'un seul div visible à la fois,

j'ai utilisé trois fonctions :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <link rel="stylesheet" href="css/floating-window.css" media="screen" type="text/css"> <script language="Javascript"> function cacher(S) { document.getElementById(S).style.visibility = 'hidden'; } function afficher(S) { document.getElementById(S).style.visibility='visible'; } function H() { for (i=0; i<=10; i++){ k=("desc"+i); cacher(k); } } </script>
donc afficher() affiche un div quand je clique sur un bouton, cacher() cache le div quand je clique dessus, et H() cache tous les div visibles,

j'ai essayé de faire :
Code:

1 2 3 4 5 <li> <div id="a0" onclick="H();afficher('desc0');"> TEST </div> </li>
qui normalement devrait cacher tous les div, et juste ensuite en afficher 1 seul.

Mais ça ne marche pas, quand je fait ça rien ne se passe lorsque je clique sur le bouton, comme si la deuxième fonction ne s'executait pas

Quelqu un saurai comment faire ?

Merci

Pourquoi ne pas appeler H() au début de la fonction afficher(S) ?

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
<html>
<head>
<style>
.cache {visibility:hidden;}
</style>
<script language="Javascript">
function cacher(S)
{
document.getElementById(S).style.visibility = 'hidden';
}
 
function afficher(S)     
{
H();
document.getElementById(S).style.visibility='visible';
}  
 
function H()
{
for (i=0; i<=2; i++){ 
   k=("desc"+i);
   cacher(k);   
   } 
}
</script>
</head>
<body>
<div onclick="afficher('desc0');">T0</div>
<div onclick="afficher('desc1');">T1</div>
<div onclick="afficher('desc2');">T2</div>
 
<div id="desc0" onclick="cacher('desc0');">TEST0</div>
<div class="cache" id="desc1" onclick="cacher('desc1');">TEST1</div>
<div class="cache" id="desc2" onclick="cacher('desc2');">TEST2</div>
 
</body>
</html>

Fred

28/02/2011, 21h58
ABCIWEB

micetf a répondu à ta question initiale concernant l'appel successif de fonctions.

mais concernant ce genre de problématique

Citation:

Envoyé par aku84

...donc afficher() affiche un div quand je clique sur un bouton, cacher() cache le div quand je clique dessus, et H() cache tous les div visibles,

il y a peut être quelque chose qui, sur le principe, pourrait t'aider sur ce lien, un exemple du code du lien est ici
28/02/2011, 22h47
aku84

Merci pour les réponses, en fait c'était parce que dans la fonction H() j'avais mis "i<=10" alors que je n'avais que 3 div..... du coup avec "i<=3" ça marche très bien..

Je pensai que que si i dépasse ça l'aurai automatiquement passé en fait il ne faut pas qu'il soit supérieur
01/03/2011, 00h14
ABCIWEB

Citation:

Envoyé par aku84

Je pensai que que si i dépasse ça l'aurai automatiquement passé en fait il ne faut pas qu'il soit supérieur

C'est bien le problème de ce genre de code. Tu pourrais passer les id des div comme argument à la fonction H et ensuite tu récupères ton tableau d'id à afficher ou à cacher avec par exemple var tab_id = H.arguments;
C'est sur ce principe qu'est fait le code que j'ai donné en lien plus haut.
01/03/2011, 01h01
aku84

oui je l'ai regardé rapidement mais ça m'a paru un peu hermétique pour le moment car je connais pas trop^^ la j'ai juste fais un copier collé que j'ai arrangé... mais je connais un peu le principe des tables dans un autre langage je le regarderai plus tard

C'est compliqué parce que c'est du on/off et que les états "affiché" ou "masqué" sont enregistrés dans un cookie pour retrouver le même état dans différentes sessions.

Mais pour ton exemple je voulais dire simplement que si dans ta fonction H
tu passe l'id des div en paramètre, par exemple

Code:

onclick = "H('desc1','desc2','desc3')"

Tu peux récupérer ces paramètres, quelque soit leur nombre, en faisant
Code:

1 2 3 4 5 6 7 8 function H() { //récupération dans le tableau tab_id des paramètres passés à la fonction H var tab_id = H.arguments; //et on liste les éléments du tableau en appelant la fonction cacher for (var i=0; i < tab_id.length; i++) {cacher(tab_id[i]);} }
Ainsi la fonction javascript marchera sans modification quand tu ajoutera un id de div dans ta fonction H et de plus tu ne seras plus tributaire d'avoir des div avec des id ayant un nom précis et incrémenté ;)

Bonjour, j'ai une autre question, je voudrai changer le mouseover et mouseout de plusieurs éléments quand je clique à un endroit, j'ai essayé de faire :
Code:

1 2 3 4 5 6 7 8 9 function test1 () { for (i=0;i<=9;i++) { k=('a'+i); document.getElementById(k).onmouseover = function () {document.getElementById(k).style.backgroundColor='gray'}; document.getElementById(k).onmouseout = function () {document.getElementById(k).style.backgroundColor='darkgray'}; } }
mais seulement le dernier element est changé (pour i=9), et de plus quand je survole tous les autres elements, l'element 9 se met aussi en surbrillance comme si j'avais la souris au dessus

est-ce qu'on peut faire ça de cette façon ? Merci

Citation:

Envoyé par aku84

Bonjour, j'ai une autre question, je voudrai changer le mouseover et mouseout de plusieurs éléments quand je clique à un endroit, j'ai essayé de faire :

Code:

1
2
3
4
5
6
7
8
9
function test1 ()
{
for (i=0;i<=9;i++)
{
k=('a'+i);
document.getElementById(k).onmouseover = function () {document.getElementById(k).style.backgroundColor='gray'};
document.getElementById(k).onmouseout = function () {document.getElementById(k).style.backgroundColor='darkgray'}; 
}
}

mais seulement le dernier element est changé (pour i=9), et de plus quand je survole tous les autres elements, l'element 9 se met aussi en surbrillance comme si j'avais la souris au dessus

est-ce qu'on peut faire ça de cette façon ? Merci

On ne peut pas faire comme cela.

Pour un débutant t'as le chic pour ne pas commencer par le plus simple !

Donc en prenant modèle sur le lien ci-dessus, on pourrait faire un truc comme ça :

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
79
80
81
82
83
84
85
86
87
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--
function add_evenement(id_obj,evenement,color) 
{
 
 
	function backg(event) 
	{ 
 
		var target = event.target || event.srcElement; 
 
		target.style.backgroundColor = color;
 
		if (event.preventDefault)
					{ 
					  event.preventDefault(); 
					} 
 
		event.returnValue = false; 
	} 
 
	if (id_obj.addEventListener) 
		{ 
		  	id_obj.addEventListener(evenement, backg, false); 
		} 
		else if (id_obj.attachEvent) 
		{ 
	  		id_obj.attachEvent("on"+evenement+"", backg); 
		}
}
 
 
function background ()
{
 
	var tab_background = background.arguments;
 
	var tab_back_length = tab_background.length;
 
	var id_obj = null;
 
	for (i=0;i<tab_back_length;i++)
		{
			if (id_obj = document.getElementById(tab_background[i]))
				{
					add_evenement(id_obj,'mouseover','gray');
					add_evenement(id_obj,'mouseout','darkgray');
				}
		}
 
}
 
 
function aclic()
{
	background ('testXD','test4','azerty','testM','testU','testJ','test7');
}
-->
</script>
</head>
 
<body>
<div>
<a href = "#"  onclick = "aclic()" >click</a>
</div>
 
<div id = "test4" style="margin-top:2em">dfvdfvdfvd</div>
 
<div id = "testM" style="margin-top:2em">dfvdfvdfvd</div>
 
<div id = "testU" style="margin-top:2em">dfvdfvdfvd</div>
 
<div id = "testJ" style="margin-top:2em">dfvdfvdfvd</div>
 
<div id = "test7" style="margin-top:2em">dfvdfvdfvd</div>
 
<div id = "testXD" style="margin-top:2em">dfvdfvdfvd</div>
 
<div id = "azerty" style="margin-top:2em">dfvdfvdfvd</div>
 
</body>
</html>

A tester dans une page séparée.

Merci pour la reponse, il y a des chose que je n'ai pas compris dans ce code comme cette ligne :

Code:

if (id_obj = document.getElementById(tab_background[i]))

pourquoi ce n'est pas "==" ?

sinon ça marche mais ça je n'ai pas trouvé très pratique :

Code:

background ('testXD','test4','azerty','testM','testU','testJ','test7');

puisqu'il faut entrer le nom de toutes les ID....

finalement je suis arrivé en faisant ça :

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Calendrier</title>
 
<style type="text/css">
 
</style>
 
<script type="text/javascript"> 
 
 function AY(J) { 
  //var Y = document.getElementById('A0');
  var Z = new Array();
 
    for (i=0;i<=2;i++) {          
         var temp = document.getElementById('A'+i);          
         Z[i] = temp;   
                       }
 
             for (i=0;i<=2;i++) {
                    back(Z[i])          
                    AZ(Z[i]) ;
                                }
 
             var U = document.getElementById(J);
             AZK(U);                    
 
   }    
 
function AZ(T) {
  T.onmouseover = function() {T.style.backgroundColor='darkgray'};
  T.onmouseout = function() {T.style.backgroundColor='gray'};              
                }
 
function AZK(T) {
  T.onmouseover = function() {T.style.backgroundColor='red'};
  T.onmouseout = function() {T.style.backgroundColor='darkred'};
  T.style.backgroundColor='red'              
                }
 
function back(T) {
           T.style.backgroundColor='gray';
                }
 
</script>
 
</head>
<body>
           <div id="A0" onclick="AY('A0');">
             TEXTE 0
           </div>
 
           <div id="A1" onclick="AY('A1');">
             TEXTE 1
           </div>
 
           <div id="A2" onclick="AY('A2');">
             TEXTE 2
           </div>
 
</body>
</html>

il faut toujours entrer le nombre exact d'ID pour la boucle sur le i mais ça marche

04/03/2011, 05h37
ABCIWEB

Code:

if (id_obj = document.getElementById(tab_background[i]))

C'est une affectation suivi d'une condition donc il ne faut pas de "==" puisque le test est sur le if et nom sur l'égalité des variables.

Pour le reste, bah à partir du moment ou tu interviens sur le code tu peux tout aussi bien nommer les div que changer ton incrément. Changer l'incrément va aller un petit peu plus vite mais d'un autre côté, nommer les div te permet de ne pas être dépendant d'un nom défini et forcément incrémenté. Encore si tu en avais des dizaines ... mais bon fais comme tu veux :)