Problema:Continuar el algoritmo para permitir ocultar el mensaje al hacer clic sobre el mismo mensaje.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
<link rel="stylesheet" href="estilos.css">
</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>
<script src="funciones.js"></script>
</body>
</html>
.mensajeoculto {
display: none;
}
.mensajevisible {
color: #aaf;
background-color: #ff0;
display: block;
font-size: 30px;
width: 400px;
border: 1px solid #00f;
padding: 5px;
}
document.getElementById('enlace').addEventListener('click', () => {
let ele = document.querySelector('#mensaje')
if (ele.className == 'mensajeoculto')
ele.className = 'mensajevisible'
else
ele.className = 'mensajeoculto'
})
document.getElementById('mensaje').addEventListener('click', () => {
let ele = document.querySelector('#mensaje')
ele.className = 'mensajeoculto'
})