53 - Propiedad className



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'
})
Ver solución


Retornar