1

Estoy intentando que el fondo del documento cambie de color, se supone que a través de este código debería ser posible. Pero al ejecutarlo solo logra cambiar de color dos veces, pero luego deja de funcionar (no entiendo la razon), alguna idea de por qué sucede. Ya lo he intentado bastante (estoy en fase de aprendizaje), pero no logro solucionar este error por ningún medio que llegue a mi alcance. DEJO TODO EL CODIGO, HTML, CSS Y JS, PARA QUE SEA MÁS FACIL DE ENTENDER. SI EL CODIGO ESTA MAL Y LLENO DE MALAS PRACTICAS PERDON, PERO LLEVO UNA SEMANA O MENOS REALIZANDO EJERCICIOS POR MI CUENTA Y PEQUEÑOS RETOS

document.addEventListener('DOMContentLoaded', ( ) => {
    //eventListener -->puede ser un simple elemento en un archivo, el mismo  documento , una ventana o un  XMLHttpRequest.
    //DOMContentLoaded --> es disparado cuando el documento HTML ha sido completamente cargado y parseado,
    // sin esperar hojas de estilo, images y subframes para  finalizar la carga
    let colorPrincipal= '#FFFFFF';
    let colorNegro='#000000'
    let tema=document.getElementById('icono_tema')

    tema.addEventListener('click', ()=>{
        let bg = document.body;
        let h1= document.querySelector('header h1')

        if(bg.style.backgroundColor === "" || bg.style.backgroundColor === colorPrincipal){
            bg.style.backgroundColor =colorNegro
            h1.style.color=colorNegro
        } else if (bg.style.backgroundColor =colorNegro){
            bg.style.backgroundColor =colorPrincipal
            h1.style.color=colorNegro
        }
    })
})
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
h1{
    cursor: default;
    text-align: center;
}

header{
    min-width: 100vw;
    min-height: 15vh;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    z-index: 2;
}
nav{
    z-index: 1;
}
.icono_hamburguesa{
    width: 70px;
    height: 66px;
    border-radius: 50%;
    background: red;
    cursor: pointer;
    display: flex;
    align-items: center;
}
#menu{
    position: absolute;
    background: black;
    width:40px;
    height: 4px;
}
#menu::before {
    position: absolute;
    content: "";
    width: 40px;
    height: 4px;
    top: 15px;
    background: black;
} 
#menu::after{ 
    position: absolute;
    content: "";
    width: 40px;
    height: 4px;
    top: -15px;
    background: black;
}
.headd{
    border-bottom: 3px solid #9171C2;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#icono_tema{
    cursor: pointer;
    width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
}
#semi_circulo_derecha{
    width: 20px; 
     height: 40px; 
     border: 2px solid; 
     background: black;
     border-radius: 0 100px 100px 0;
}
#semi_circulo_izquierda{
    width: 20px; 
     height: 40px; 
     border: 2px solid black; 
     background: white;
     border-radius: 100px 0 0 100px ;
}
section{
    min-width: 100vw;
    min-height: 70vh;
    z-index: 0;
}
h1 span{
    color: #9171C2;
}
footer{
    position: relative;
    min-width: 100vw;
    min-height: 15vh;
    border-top: 2px solid #9171C2 ;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme</title>
    <link rel="stylesheet" href="./theme.css">
    <script src="./theme.js"></script>
</head>
<body>
    <header id="pagina" class="colores">
        <nav class="headd">
            <div class="icono_hamburguesa"> 
                <span id="menu" ></span>
            </div>
        </nav>
        <div class="headd">
            <h1 id="h1"> <span>Tema</span> que <span>Cambia</span> de <span>Color</span></h1>
        </div>
        <div class="headd">
            <div id="icono_tema" >
                <span id="semi_circulo_izquierda" ></span>
                <span id="semi_circulo_derecha" ></span>
            </div>
        </div>
    </header>
    <section id="pagina" class="colores"></section>
    <footer id="pagina2" class="colores"></footer>
</body>
</html>

1
  • No soluciona el problema pero tienes una errata en el else if: hay un = donde debería haber un == Commented el 22 ene. 2021 a las 10:53

1 respuesta 1

0

El formato de color #rrggbb es aplicable solo como CSS, pero el navegador lo interpreta y, cuando quieres leerlo, devuelve un valor con el formato rgb(valorRojo, valorVerde, valorAzul) o cadena vacía si no se ha asignado.

document.addEventListener('DOMContentLoaded', ( ) => {
    let colorPrincipal= '#FFFFFF';
    let colorNegro='#000000'
    let tema=document.getElementById('icono_tema')

    tema.addEventListener('click', ()=>{
        let bg = document.body;
        let h1= document.querySelector('header h1')

        // Para saber porqué no funciona:
        console.log(bg.style.backgroundColor);
        // Cambiar la comparación:
        if(bg.style.backgroundColor === "" || bg.style.backgroundColor === 'rgb(255, 255, 255)'){
            bg.style.backgroundColor =colorNegro
            h1.style.color=colorNegro
        } else if (bg.style.backgroundColor =colorNegro){
            bg.style.backgroundColor =colorPrincipal
            h1.style.color=colorNegro
        }
    })
})
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
h1{
    cursor: default;
    text-align: center;
}

header{
    min-width: 100vw;
    min-height: 15vh;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    z-index: 2;
}
nav{
    z-index: 1;
}
.icono_hamburguesa{
    width: 70px;
    height: 66px;
    border-radius: 50%;
    background: red;
    cursor: pointer;
    display: flex;
    align-items: center;
}
#menu{
    position: absolute;
    background: black;
    width:40px;
    height: 4px;
}
#menu::before {
    position: absolute;
    content: "";
    width: 40px;
    height: 4px;
    top: 15px;
    background: black;
} 
#menu::after{ 
    position: absolute;
    content: "";
    width: 40px;
    height: 4px;
    top: -15px;
    background: black;
}
.headd{
    border-bottom: 3px solid #9171C2;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#icono_tema{
    cursor: pointer;
    width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
}
#semi_circulo_derecha{
    width: 20px; 
     height: 40px; 
     border: 2px solid; 
     background: black;
     border-radius: 0 100px 100px 0;
}
#semi_circulo_izquierda{
    width: 20px; 
     height: 40px; 
     border: 2px solid black; 
     background: white;
     border-radius: 100px 0 0 100px ;
}
section{
    min-width: 100vw;
    min-height: 70vh;
    z-index: 0;
}
h1 span{
    color: #9171C2;
}
footer{
    position: relative;
    min-width: 100vw;
    min-height: 15vh;
    border-top: 2px solid #9171C2 ;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme</title>
    <link rel="stylesheet" href="./theme.css">
    <script src="./theme.js"></script>
</head>
<body>
    <header id="pagina" class="colores">
        <nav class="headd">
            <div class="icono_hamburguesa"> 
                <span id="menu" ></span>
            </div>
        </nav>
        <div class="headd">
            <h1 id="h1"> <span>Tema</span> que <span>Cambia</span> de <span>Color</span></h1>
        </div>
        <div class="headd">
            <div id="icono_tema" >
                <span id="semi_circulo_izquierda" ></span>
                <span id="semi_circulo_derecha" ></span>
            </div>
        </div>
    </header>
    <section id="pagina" class="colores"></section>
    <footer id="pagina2" class="colores"></footer>
</body>
</html>

Una solución más sencilla, sería aplicar los cambios por medio de una clase en CSS y agregándola o eliminándola de los elementos por medio de classList.toggle().

document.addEventListener('DOMContentLoaded', ( ) => {
    let colorPrincipal= '#FFFFFF';
    let colorNegro='#000000'
    let tema=document.getElementById('icono_tema')

    tema.addEventListener('click', ()=>{
        let bg = document.body;
        let h1= document.querySelector('header h1');
        // Cambiar la clase de los elementos:
        bg.classList.toggle('oscuro');
        h1.classList.toggle('oscuro');
    });
});
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
h1 {
    color:#777; /* Solo para comprobar el efecto */
    cursor: default;
    text-align: center;
}

header{
    min-width: 100vw;
    min-height: 15vh;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    z-index: 2;
}
nav{
    z-index: 1;
}
.icono_hamburguesa{
    width: 70px;
    height: 66px;
    border-radius: 50%;
    background: red;
    cursor: pointer;
    display: flex;
    align-items: center;
}
#menu{
    position: absolute;
    background: black;
    width:40px;
    height: 4px;
}
#menu::before {
    position: absolute;
    content: "";
    width: 40px;
    height: 4px;
    top: 15px;
    background: black;
} 
#menu::after{ 
    position: absolute;
    content: "";
    width: 40px;
    height: 4px;
    top: -15px;
    background: black;
}
.headd{
    border-bottom: 3px solid #9171C2;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#icono_tema{
    cursor: pointer;
    width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
}
#semi_circulo_derecha{
    width: 20px; 
     height: 40px; 
     border: 2px solid; 
     background: black;
     border-radius: 0 100px 100px 0;
}
#semi_circulo_izquierda{
    width: 20px; 
     height: 40px; 
     border: 2px solid black; 
     background: white;
     border-radius: 100px 0 0 100px ;
}
section{
    min-width: 100vw;
    min-height: 70vh;
    z-index: 0;
}
h1 span{
    color: #9171C2;
}
footer{
    position: relative;
    min-width: 100vw;
    min-height: 15vh;
    border-top: 2px solid #9171C2 ;
}
/* Definir clases para tema oscuro */
body.oscuro {
    background:#000;
}
header h1.oscuro {
    color:#000;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme</title>
    <link rel="stylesheet" href="./theme.css">
    <script src="./theme.js"></script>
</head>
<body>
    <header id="pagina" class="colores">
        <nav class="headd">
            <div class="icono_hamburguesa"> 
                <span id="menu" ></span>
            </div>
        </nav>
        <div class="headd">
            <h1 id="h1"> <span>Tema</span> que <span>Cambia</span> de <span>Color</span></h1>
        </div>
        <div class="headd">
            <div id="icono_tema" >
                <span id="semi_circulo_izquierda" ></span>
                <span id="semi_circulo_derecha" ></span>
            </div>
        </div>
    </header>
    <section id="pagina" class="colores"></section>
    <footer id="pagina2" class="colores"></footer>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.