0

Estou fazendo uma div, onde ao clicar ela fica laranja, e ao clicar novamente, ela volta a ficar branca.

Porém tenho duas perguntas :

  1. Ao comparar a cor com rgb na parte
    if(document.getElementById('homem').style.backgroundColor == 'rgb(#FF6600)') ou if(document.getElementById('homem').style.backgroundColor == '#FF6600')

    Não dá certo pois ela não volta a ficar branca. Onde estou errando?

  2. Esta é a melhor maneira de codificar a alternação de cores em click?

function selecionaGeneroH(){
		// #FF6600
		if(document.getElementById('homem').style.backgroundColor == 'rgb(#FF6600)'){
			document.getElementById('homem').style.backgroundColor = 'white';
			document.getElementById('homem').style.color = 'grey';	
			document.getElementById('homem').style.border = '4px solid #FF6600';					
		} else { 
			document.getElementById('homem').style.backgroundColor = '#FF6600';
			document.getElementById('homem').style.color = 'white';
			document.getElementById('homem').style.border = '4px solid white';
	}
}

function selecionaGeneroM(){
		if(document.getElementById('mulher').style.backgroundColor == 'orange'){
			document.getElementById('mulher').style.backgroundColor = 'white';
			document.getElementById('mulher').style.color = 'grey';	
			document.getElementById('mulher').style.border = '4px solid #FF6600';					
		} else { 
			document.getElementById('mulher').style.backgroundColor = 'orange';
			document.getElementById('mulher').style.color = 'white';
			document.getElementById('mulher').style.border = '4px solid white';
	}
}
#mulher { 
  float:left;
  width:151px;
  height:42px;
  border:4px solid #FF6600;
  color: grey;
  display: table-cell;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
  /* Códigos para que o texto não seja selecionado */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#homem {
  margin:0px 10px;
  float:left;
  width:151px;
  height:42px;
  border:4px solid #FF6600;
  color: grey;
    text-align: center;
    vertical-align: middle;	
    line-height: 40px;
  /* Códigos para que o texto não seja selecionado */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-se
<html>	
  <body>
    <tr>
      <td><div class="mulher" id="mulher" onclick="selecionaGeneroM()"> MULHERES</div></td>
      <td><div class="homem" id="homem" onclick="selecionaGeneroH()"> HOMENS</div></td>
    </tr>
    <br /><br />
  </body>
</html>

2 Respostas 2

2

1) O seu código está fazendo a comparação backgroundColor == 'rgb(#FF6600)' mas o valor do background color é rgb(255, 102, 0)

2) Você pode fazer utilizando uma classe que muda o estilo padrão. Assim você habilita ou desabilita a classe ao clicar. Segue o exemplo abaixo:

function selecionaGeneroH(){
    document.getElementById('homem').classList.toggle('ativo');
}

function selecionaGeneroM(){
    document.getElementById('mulher').classList.toggle('ativo');
}
#mulher { 
  float:left;
  width:151px;
  height:42px;
  border:4px solid #FF6600;
  color: grey;
  display: table-cell;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
  /* Códigos para que o texto não seja selecionado */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
    /* Estilo normal */
  background-color: white;
  color: grey;
  border: 4px solid #FF6600';
}

#homem {
  margin:0px 10px;
  float:left;
  width:151px;
  height:42px;
  border:4px solid #FF6600;
  color: grey;
    text-align: center;
    vertical-align: middle;	
    line-height: 40px;
  /* Códigos para que o texto não seja selecionado */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  
  /* Estilo normal */
  background-color: white;
  color: grey;
  border: 4px solid #FF6600;
 }
 
 #homem.ativo {
  background-color: #FF6600;
  color: white;
  border: 4px solid white;
 }
 
 #mulher.ativo {
  background-color: orange;
  color: white;
  border: 4px solid white;
 }
<html>	
	<body>
    <tr>
        <td><div class="mulher" id="mulher" class="ativo" onclick="selecionaGeneroM()"> MULHERES</div></td>
        <td><div class="homem" id="homem" class="ativo" onclick="selecionaGeneroH()"> HOMENS</div></td>
		</tr>
		<br /><br />
	</body>
</html>

1
  • Aaaah, entendi !! muito obrigado pela explicação @André, foi de ótima ajuda
    – Sora
    Commented 16/10/2017 às 12:38
1

Você está setando a cor com 'orange' e comparando com 'rgb(#FF6600)' tem que comparar com o mesmo valor que setou.

O melhor é usar uma variável ou um checkbox(o mais utilizado).

1
  • No homem eu defino '(#FF6600)' e o comparo e não vai. O da mulher sim eu seto orange e dá certo
    – Sora
    Commented 16/10/2017 às 12:26

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 .