Estou fazendo uma div, onde ao clicar ela fica laranja, e ao clicar novamente, ela volta a ficar branca.
Porém tenho duas perguntas :
Ao comparar a cor com rgb na parte
if(document.getElementById('homem').style.backgroundColor == 'rgb(#FF6600)')
ouif(document.getElementById('homem').style.backgroundColor == '#FF6600')
Não dá certo pois ela não volta a ficar branca. Onde estou errando?
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>