Hola a todo el mundo,
Estoy empezando a estudiar javascript, y como primer "ejercicio" he creado un pequeño código para que se muestre un mensaje al presionar un botón. Todo sale perfecto, menos el mensaje, que aparece unos segundos (y la intención es que se quede fijo después de hacer clic sobre el botón).
He aquí todo el código:
Código:
<html>
<head>
<style>
body {margin:0;}
#formulario {
position:absolute;
width:400px;
height:400px;
top:50%;
margin-top:-200px;
left:50%;
margin-left:-200px;
}
.visible {display: block;}
.oculto {display: none;}
.caja {
position:relative;
left:150px;
width: 100px;
height: 40px;
background-color:red;
border-radius:20px;
}
.message {
position: absolute;
left:55px;
top:60px;
background-color: #F0F0F0;
width: 250px;
height: 20px;
background-color:#096;
text-align:center;
color:white;
padding:20px;
}
</style>
<script type="text/javascript">
function mostrarMessage(evento, idCapa) {
document.getElementById(idCapa).className = "message visible";
}
</script>
</head>
<body>
<div id="formulario">
<div id="message" CLASS="message oculto">Hemos recibido tus datos</div>
<form action="">
<input type="submit" name="" class="caja" onMouseDown="mostrarMessage(event, 'message')">
</form>
</div>
</body>
</html>
¿Alguien me puede decir dónde estoy metiendo la pata? ¿?
Gracias por vuestro tiempo :)