Fala meu querido! Tudo beleza?
Dei uma olhada no seu código e tomei a liberdade de escrever um próprio.
Criei 3 classes específicas para o cabeçalho, dei o nome de cabecalho1, cabecalho2, cabecalho3.
.cabecalho1{
background: 10px #20B2AA;
height: 150px;
border-bottom: 9px inset grey;
}
.cabecalho2{
background: 10px red;
height: 150px;
border-bottom: 9px inset grey;
}
.cabecalho3{
background: 10px green;
height: 150px;
border-bottom: 9px inset grey;
}
Poderiamos ter alterado a cor do elemento direto via JS, mas isso não é uma boa prática. Lembre-se que estilos devem estar contidos no CSS e não no JS. Se por um acaso a identidade visual do seu site mudar (as cores do cabeçalho), você terá que lembrar de alterar seu JS, o que é problemático.
O seu header precisará começar com a classe inicial cabecalho1
<header class="cabecalho1">
Agora, vem a parte lógica.
Esse problema tem cara de que devemos utilizar if's e tudo mais, porém abordei de maneira diferente.
portfolio.js
let logo = document.querySelector('.logo');
let classes = ['cabecalho1', 'cabecalho2', 'cabecalho3'];
let posicao = 0;
logo.addEventListener('click', function(event){
posicao = (posicao+1)%classes.length
event.target.parentNode.parentNode.className = classes[posicao];
});
Criei um array com as classes que precisaria ciclar e minha variável auxiliar posicao iniciando com 0.
Dentro do addEventListener, responsável por escutar os clicks do usuário, utilizei uma lógica matemática com MOD (resto de uma divisão)
Recomento que você utilize o console.log(posicao) para entender melhor a variação.
O event é um paramêtro opcional que o navegador passa para nosso método, através dele temos algumas informações do evento.
No seu caso, a estrutura do HTML está mais ou menos assim:
<header
<div
<img
De acordo com o clique na img, será necessário mudar a classe do elemento header, isso é algo que podemos fazer usando o event!
event.target //retorna o alvo do evento
event.target.parentNode //retorna o elemento pai do alvo
Como precisaríamos subir dois níveis na hierarquia do HTML, é necessário encadear .parentNode.parentNode
O .className serve para que troquemos todas as classes do elemento, pela que queremos aplicar.
Se algo ficou nebuloso, basta perguntar!
Espero que tenha ajudado meu amigo.
Abraços e sucesso!
