Skip to main content
1 de 2

Alternar estado (True/False) ao clicar em um botão - JavaScript

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>