Bouton alternant 2 fonctions sur le même événement onClick

**claire67** · 24/03/2009, 12h16

Bonjour à tous,

J'ai un problème de grande débutante.
Je cherche à créer un seul bouton / image :
- qui change selon qu'il est cliqué (afficher - masquer - afficher -masquer etc) ;
- et qui permet d'afficher / masquer une ligne de tableau.
J'ai les deux fonctions, elles marchent impec'. Je les ai déjà grapillées sur ce site-même !!

Code du changement d'image du bouton

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var tab_image = new Array(2);
for (var i=0; i< tab_image.length;i++)
    tab_image[i]= new Image();
tab_image[0].src='img/ensavoirplus.gif';
tab_image[1].src='img/ensavoirmoins.gif';
 
var n=0;
 
function change() {
n= ++n;
if (n == tab_image.length) n=0;
window.document.image.src=tab_image[n].src;
}

Le code de l'afficher / masquer de la ligne de tableau:

Code :

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

1
2
3
4
5
6
7
8
9
10
function aff (  )
{
    tr = document.getElementById('tr2');
    tr.style.display = "";
}
function cach (  )
{
    tr = document.getElementById('tr2');
    tr.style.display = "none";
}

Il y a dans le body un tableau et deux images qui ont les propriétés de cach() et aff().

Avez vous une idée pour qu'un seul bouton, changeant lui-même, permette d'afficher ou masquer une ligne de tableau ?
Je vous en remercie tous vivement !
Claire qui galère depuis hier ;-)

**RomainVALERI** · 24/03/2009, 12h19

Code :

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

1
2
3
4
5
6
function bascule()
{
   var tr = document.getElementById('tr2');
   if (tr.style.display == "block") tr.style.display = "";
   else tr.style.display = "block";
}

**claire67** · 24/03/2009, 13h14

Bonjour !
Merci infiniment d'avoir répondu si vite et votre solution correspond tout à fait ... à ce que je n'aurais pas pensé ! ;-)
Je l'ai testée mais elle ne masquait pas de ligne.
Je l'ai transformée ainsi :

Code :

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

1
2
3
4
5
6
7
function bascule()
{
   var tr = document.getElementById('tr2');
   if (tr.style.display =="block") tr.style.display = "none";
   else tr.style.display = "block";
 
}

et elle donne un résultat, mais sans doute faux. Au rafraichissement de la page, les deux lignes (tr1 et tr2) sont visibles, or j'aimerais que tr2 soit masquée au début. Je pense m'être tompée dans la fonction, mais où ?
Auriez-vous la gentillesse de regarder mon erreur ?
Merci vivement,
Claire

**emmanuel.remy** · 24/03/2009, 13h22

Envoyé par claire67

Au rafraichissement de la page, les deux lignes (tr1 et tr2) sont visibles, or j'aimerais que tr2 soit masquée au début

pour la ligne du tableau qui correspond à tr2:

Code :

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

1
2
 
<tr style="display:none">.... </tr>

ERE

**claire67** · 24/03/2009, 14h43

Merci à vous deux qui m'avez si rapidement répondu. Tout marche impeccablement bien.

Je mets en pièce jointe le code complet et vous souhaite une bonne fin de journée,
Claire

**emmanuel.remy** · 24/03/2009, 15h22

En restant dans ta logique, mais en transformant la fonction bascule pour que tu puisse la réutiliser et en simplifiant ton tableau d'images (parce que dans ton cas c'est possible)

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
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<script langage="JavaScript">
function bascule(tr)
{
   if (tr.style.display == "block") tr.style.display = "none";
   else tr.style.display = "block";
}
//pour deux petites images, faut pas s'embêter
var tab_image = ['img/ensavoirplus.gif', 'img/ensavoirmoins.gif'];
var n=0;
function change() {
  document.image.src = tab_image[++n % 2];
}
</script>
 
<body>
<table id="F">
   <tr id="tr1"><td>1-1</td></tr>
   <tr id="tr2" style="display:none"><td>2-1</td></tr>
</table>
 
    <a href="javascript: bascule(document.getElementById('tr2'));change()">
            <img name="image" src="img/ensavoirplus.gif" border=0 alt="+ d'info" /></a>
</body>
</html>

ERE