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
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 de tnathos
1