2

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>
							

3
  • 1
    Cara, tem muita coisa desnecessária no seu código para o objetivo de apenas mudar uma cor. O que realmente você quer aprender com esse código? Commented 22/03/2020 às 0:53
  • @FranckCosta, a ideia na verdade era criar uma lógica mais "pura" para o objetivo, sem utilizar recursos do próprio JS/ES6, e sim usando apenas condicionais e repetições. Commented 22/03/2020 às 1:00
  • Entendo, dei uma resposta adaptando seu código, mas o que o @fwerther fez é o jeito mais simples e correto de se fazer. Commented 22/03/2020 às 1:11

2 Respostas 2

4

Cara, como o @fwerther mencionou, algo para apenas a mudança de classe e o que ele fez supri suas necessidades. No entanto, adaptei seu código fazer mais sentido, se você quer ter a dinâmica de guardar o estado para algum tipo de processamento depois, você tem que muda-lo assim que receber a informação, por exemplo, se você recebe ele como true então você precisa guarda-lo como false, para posteriormente consegui fazer as mudanças. No que você fez ele sempre guarda o estado como true, assim nunca haverá alteração.

var stateClass = true;
var button_MudaCor = document.querySelector("#mudarCor");

button_MudaCor.onclick = function mudaEstado() {
    if (pegaEstado() == true) {
        mudaCor(true);
        guardaEstado(false);
    } else {
        mudaCor(false);
        guardaEstado(true);
    }
};

function pegaEstado() {
    return stateClass;
};

function guardaEstado(teste) {
    stateClass = teste;
};

function mudaCor(state) {
    if (state == true) {
        button_MudaCor.className.add('changeColor');
    } else {
        button_MudaCor.classList.remove('changeColor');
    }
};
4
4

Achei seu código meio bagunçado, mas, se o objetivo era só trocar as cores, vê se esse exemplo responde seu problema:

var button_MudaCor = document.querySelector("#mudarCor");

button_MudaCor.addEventListener('click', function (event) {

  if (button_MudaCor.classList.contains('changeColor')) {
    button_MudaCor.classList.remove('changeColor');
  } else {
    button_MudaCor.classList.add('changeColor');
  }

}, false);

Você pode ver o exemplo funcionando em https://jsfiddle.net/knvg6h2o/

1
  • 1
    Ele resolve o problema (era exatamente isso rsrsrs). É que a ideia em si era fazer o processo sem utilizar muito os recursos do JS/ES6, apenas para treinar lógica (mas realmente, o seu modo é o mais correto). Commented 22/03/2020 às 1:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .