Boa noite!
Estou testando e aprendendo JS, e houve uma dúvida que até o momento não consegui resolver. Tenho uma página simples em HTML, onde a ideia é que que cada vez que eu clicar em um botão, quero que ele fique com um efeito, e se eu clicar novamente, ele retire o efeito (e assim sucessivamente, sempre alternando o estado ao click).
Consigo fazer ele ficar com o efeito ao clicar no botão, mas não consigo fazer ele retirar o efeito quando clico novamente.
Já testei algumas formas e lógicas, mas não consigo fazer. A ideia que tive foi verificar o "estado" do botão, se for TRUE, ele troca a cor, caso contrário ele irá tirar a cor, mas a minha validação sempre cai para TRUE.
Acredito que o problema esteja na função pegaEstado(), pois ela sempre pega a variável estado como nula, fazendo ela sempre enviar TRUE, mas não sei como eu poderia "gravar" a última informação da variável, tentei colocar para ela receber uma função que guardaria o estado, mas sem sucesso. Gostaria de ideias para resolver essa lógica. (segue abaixo o código compilando)
var button_MudaCor = document.querySelector("#mudarCor");
button_MudaCor.onclick = function mudaEstado() {
if (pegaEstado() == true) {
mudaCor(true);
} else {
mudaCor(false);
}
};
function pegaEstado() {
var estado = guardaEstado();
if (estado == null || estado == true) {
guardaEstado(true);
estado = true;
} else {
guardaEstado(false);
estado = false;
}
return estado;
};
function guardaEstado(teste) {
this.teste = teste;
};
function mudaCor(state) {
if (state == true) {
button_MudaCor.className = "changeColor";
} else {
button_MudaCor.className = "";
}
};
.changeColor {
border-style: outset;
border-top-style: none;
border-left-style: none;
box-shadow: 3px -3px 8px 1px grey ;
}
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/style_index.css">
<link href="https://fonts.googleapis.com/css?family=Inter|Roboto+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<header></header>
<main>
<section class="login">
<h2>Faça o login ou cadastra-se</h2>
<div>
<input type="text" id="usuario" autocomplete="name" placeholder="Usuário ou e-mail">
<input type="password" autocomplete="current-password" id="senha" placeholder="Senha">
<button class="botao" id="logar">Login</button>
<button class="botao" target="_self" id="cadastrar">Cadastrar</button>
<button class="botao" id="mudarCor">Mudar cores</button>
</div>
</section>
</main>
<footer></footer>
<script type="text/javascript" src="../Model/model.js"></script>
<script type="text/javascript" src="../Controller/controller.js" aynsc></script>
</body>
</html>