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>