 |
Mostrar y ocultar mensaje
Mostrar y ocultar mensaje
Este algoritmo es bastante sencillo y tiene por objetivo mostrar/ocultar una sección en una página HTML.
Inicialmente el mensaje se encuentra oculto y debemos hacer clic en el enlace para mostrarlo.
Luego si hacemos nuevamente clic volvemos a ocultarlo.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
var ob=document.getElementById('enlace');
ob.addEventListener('click',mostrarOcultarMensaje,false);
}
function mostrarOcultarMensaje(e)
{
var ele=document.getElementById('mensaje');
if (ele.className=='mensajeoculto')
ele.className='mensajevisible';
else
ele.className='mensajeoculto';
}
</script>
<style>
.mensajeoculto{
display:none;
}
.mensajevisible{
color:#aaf;
background-color:#ff0;
display:block;
font-size:30px;
width:400px;
border:1px solid #00f;
padding:5px;
}
</style>
</head>
<body>
<div class="mensajeoculto" id="mensaje">
Todo este texto permanece oculto hasta que se presiona el
enlace de la parte inferior.
</div>
<a href="#" id="enlace">Mostrar/Ocultar Mensaje.</a>
</body>
</html>
El código javascript es:
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
var ob=document.getElementById('enlace');
ob.addEventListener('click',mostrarOcultarMensaje,false);
}
function mostrarOcultarMensaje(e)
{
var ele=document.getElementById('mensaje');
if (ele.className=='mensajeoculto')
ele.className='mensajevisible';
else
ele.className='mensajeoculto';
}
Para resolver este problema cuando se presiona el hipervinculo procedemos a extraer el nombre de la clase asignada al elemento. En el caso que contenga el valor 'mensajeoculto' procedemos a cambiar por la clase 'mensajevisible' (esta otra clase hace visible el elemento HTML):
function mostrarOcultarMensaje(e)
{
var ele=document.getElementById('mensaje');
if (ele.className=='mensajeoculto')
ele.className='mensajevisible';
else
ele.className='mensajeoculto';
}