Enchainement de fonctions javascript

**aku84** · 28/02/2011, 20h18

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 :

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

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

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

**micetf** · 28/02/2011, 21h31

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

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

**ABCIWEB** · 28/02/2011, 21h58

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

mais concernant ce genre de problématique

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

**aku84** · 28/02/2011, 22h47

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

**ABCIWEB** · 01/03/2011, 00h14

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.

**aku84** · 01/03/2011, 01h01

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

**ABCIWEB** · 01/03/2011, 02h15

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 :

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

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

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

Code :

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

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é

**aku84** · 01/03/2011, 13h37

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 :

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

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

**ABCIWEB** · 01/03/2011, 20h08

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 :

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

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 :

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

**aku84** · 03/03/2011, 18h21

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

Code :

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

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 :

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

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 :

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

**ABCIWEB** · 04/03/2011, 05h37

Code :

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

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

Enchainement de fonctions javascript

JavaScript

Discussions similaires

Partager

Partager