Probleme JavaScript div hidden

Sujet résolu

14 juin 2010 à 16:46:59

Bonjour j'ai un problème avec du javascript je voudrais afficher et masquer des div.

Je sait le faire, mais ça ne marche pas parce qu'il y a plusieurs autres div autour

Regardez par exemple une page de Teste

<script language="javascript">
// La fonction qui affiche/masque l'élément
function bascule1(elem)
{
if (elem=='modiftrue')
{document.getElementById(elem).style.visibility="visible";
document.getElementById('modiffalse').style.visibility="hidden";
document.getElementById(elem).style1.visibility="visible";
document.getElementById('modiffalse1').style1.visibility="hidden";
}
else if (elem=='modiffalse')
{document.getElementById(elem).style.visibility="visible";
document.getElementById('modiftrue').style.visibility="hidden";
document.getElementById(elem).style1.visibility="visible";
document.getElementById('modiftrue1').style1.visibility="hidden";
}
}
</script>
</head>
<body>

<?php

echo" <form name=message method=post action=forum.php>
<span class=depressed onClick=bascule1('modiffalse');><b>Afficher les modifications</b></span>
<span class=depressed onClick=bascule1('modiftrue');><b>Masquer les modifications</b></span>
<form method=post action=CibleModificationTicket.php>";
echo" <div name='modiftrue' id='modiftrue' style='visibility: hidden'>
<div name='modiffalse' id='modiffalse' style='visibility: hidden'>
<input type=text name=descriptif value=$newarray[5]>
<input type=submit value = modifier>
<div name='modiftrue1' id='modiftrue1' style1='visibility: hidden'>
<div name='modiffalse1' id='modiffalse1' style1='visibility: hidden'>
<textarea cols=80 rows=20 name=result style=overflow:visible;color:blue;background:white readonly=readonly> </textarea>";
?>

Ici tout fonctionne quand je clique sur <span class=depressed... sa m'affiche la Textbox, Textarea et Submit.
(les span sont des radioboutons plus design)

Mais dans mon vrai code j'ai le même JavaScript que sur la page de Teste donc je vous le réaffiche pas je vous affiche seulement mon PHP ou sa merde :

<div class=element_menu3 align = center><font color=#046380> Titre : </font><br>$newarray[4]<br><br>";
echo" <div name='modiftrue1' id='modiftrue1' style1='visibility: hidden'>
<div name='modiffalse1' id='modiffalse1' style1='visibility: hidden'>
<input type=text name=descriptif value=$newarray[5]>
<input type=submit value = modifier>";
echo" </div></div></div>";
echo" <div class=element_menu3 align = center><font color=#046380> Descriptif : </font><br>$newarray[5]<br><br>";
echo" <div name='modiftrue' id='modiftrue' style='visibility: hidden'>
<div name='modiffalse' id='modiffalse' style='visibility: hidden'>
<input type=text name=descriptif value=$newarray[5]>
<input type=submit value = modifier>";
echo" </div></div></div>";

Si quelqu'un aurait la solution, je la connais à moitié car dans la page de Teste quand je ferme les </div> entre les deux div avec la fonction hidden sa ne fonctionne qu'a moitié mais dans la vrai page, je suis obligé de fermer les div

Merci de votre aide j'espere que c'est assez claire

birdy42

14 juin 2010 à 16:51:49

Remplacer visibility:hidden par .style.display="" // affiché et .style.display="none" // caché
?

LIONEL_95

14 juin 2010 à 17:13:04

Donc j'ai essayé de faire ce que tu m'a dit sa a l'aire d'etre sur la bonne voie maintenant quand je clique sur masquer les modifications sa me masque tout mais quand je clique sur afficher les modifications sa m'affiche que la Textarea qui est dans la 2eme div.

J'ai seulement modifié la JavaScript

<script language="javascript">
// La fonction qui affiche/masque l'élément
function bascule1(elem)
{
if (elem=='modiftrue')
{document.getElementById(elem).style.display="" ;
document.getElementById('modiffalse').style.display="none";
document.getElementById(elem).style.display="none";
document.getElementById('modiftrue1').style1.display="";
}
else if (elem=='modiffalse')
{document.getElementById(elem).style.display="";
document.getElementById('modiftrue').style.display="none";
document.getElementById(elem).style1.display="";
document.getElementById('modiffalse1').style1.display="none";
}
}
</script>

Si quelqu'un saurait trouver l'erreur sa m'aiderais vraiment Merci

birdy42

14 juin 2010 à 18:14:23

tu as modifié aussi les visibility dans le HTML ?

LIONEL_95

15 juin 2010 à 11:07:56

Voici la solution :

<html>
<head><title>Ticket</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="print" />
<script language="javascript">
// La fonction qui affiche/masque l'élément
function bascule1(elem)
{
if (elem=='afficher')
{
document.getElementById('modiftrue').style.visibility="visible";
document.getElementById('modiftrue2').style.visibility="visible";
}
else if (elem=='masquer')
{document.getElementById('modiftrue').style.visibility="hidden";
document.getElementById('modiftrue2').style.visibility="hidden";
}
}
</script>
</head>
<body>

<?php

echo" <form name=message method=post action=forum.php><span class=depressed onClick=bascule1('afficher')><b>Afficher les modifications</b></span>
<span class=depressed onClick=bascule1('masquer')><b>Masquer les modifications</b></span>
<form method=post action=CibleModificationTicket.php>";
echo" <br><br><div name ='titre'> TON TITRE</div>

<div name='modiftrue' id='modiftrue' style='visibility: 'visible''>
<input type=text name=descriptif value=$newarray[5]>
<input type=submit value = modifier>
<textarea cols=80 rows=20 name=result style=overflow:visible; color:blue; background:white readonly=readonly></textarea></div>";

echo" <div name ='titre'> TON TITRE 2</div>

<div name='modiftrue2' id='modiftrue2' style='visibility: 'visible''>
<input type=text name=descriptif value=$newarray[5]>
<input type=submit value = modifier>
<textarea cols=80 rows=20 name=result style=overflow:visible; color:blue; background:white readonly=readonly></textarea></div>";

?>