No muestra la capa

Buenos Dias
resulta que necesito hacer una pagina con un javascript que capture de un textfield un valor n y calcule el factorial de este, el resultado lo debera mostrar en otro textfield que esta dentro de otra capa que solo se mostrara en el momento de calcular y se ocultara  al presionar el boton que esta en esta ultima...el problema es que estaba funcionando perfectamente hasta que le agregue otra capa, ahora solo la muestra unos instantes o aveces no muestra nada. La verdad no veo el error
aqui esta el script que tengo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FactoJuan</title>
</head>
<style>
h1{ font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 24px;
 font-style: italic;
 font-weight:normal;
 text-align:center;
 color: #FFFFFF;
  }
#Cjuan {
 left: 277px;
 top: 153px;
 width:253px;
 height:100px;
 background-color: #CCCCCC;
 border: double;
 border-color:#000099;
 border-width:5px;
 position:absolute;
 visibility: visible;
 padding:4px;
 z-index: 1; 
}
.Cjuan2{
 left: 202px;
 top: 187px;
 width:800px;
 height:400px;
 background-color: #999999;
 position:absolute;
 visibility: visible;
 z-index: 0;
 border: double;
 border-color:#000099;
 border-width:5px;
}
#Cjuan3 {
 left: 1px;
 top: 124px;
 width:253px;
 height:100px;
 background-color: #CCCCCC;
 border: double;
 border-color:#000099;
 border-width:5px;
 position:absolute;
 visibility: hidden;
 z-index: 1; 
}
#Cjuan4 {
 left: 46px;
 top: 60px;
 width:182px;
 height:30px;
 background-color: #CCCCCC;
 border-color:#000099;
 border-width:5px;
 position:absolute;
 z-index: 2; 
 }
.Cjuan5 {
 left: 60px;
 top: 61px;
 width:148px;
 height:30px;
 background-color: #CCCCCC;
 border-color:#000099;
 border-width:5px;
 position:absolute;
 z-index: 2; 
 }
#logo {
 position:absolute;
 width:271px;
 height:181px;
 border: double;
 border-color:#000099;
 border-width:5px;
 z-index:0;
 left: 475px;
 top: 2px;
}
</style>
<script>
     var fact=1; 
     function mostrar(form)
      {
      var n=form.caja1.value;
      for(var i=1; i<=n; i++)
       {
       fact=i*fact
       }
       form.caja2.value=fact;
       document.getElementById('Cjuan3').style.visibility = "visible";
      }
     function ocultar()
        {
      document.getElementById('Cjuan3').style.visibility = "hidden";
        }
 </script>
<body>
<div id="logo"><img src="facto2.jpg" /></div>
<div class="Cjuan2">
<div id="Cjuan">
<h1>Digite el Numero</h1>
 <form>
<div id="Cjuan4">
   <input type="text" name="caja1" size="10" />
   <input type="submit" name="Btnjuan" value="calcular" onclick="mostrar(this.form)"/>
   </div>
<div id="Cjuan3">
<h1>Resultado</h1>
<div class="Cjuan5">
   <input type="text" name="caja2"  size="5"  />
   <input type="submit" name="Btnjuan2" value="On/Off" onclick="ocultar()" />
    </div>
  </div>
    </form>
  </div>
</div>
</body>
</html>
de ante mano agradezco su colaboracion
Respuesta
1
Primero a la funcion no le debeberias enviar nada..
function mostrar(form) por function mostrar() y esto <input type="submit" name="Btnjuan" value="calcular" onclick="mostrar(this.form)"/> asi <input type="submit" name="Btnjuan" value="calcular" onclick="mostrar()"/>
Lo segundo, yo siempre uso jquery para ahorrar alunas lienas de codigo, no obstante deberias hacerlo asi.
document.getElementById('Cjuan3').style.display = "block" y document.getElementById('Cjuan3').style.display = "none"

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas