Setting the color of a div in rgb

Asked

Viewed 217 times

0

I’m doing a div, where when I click it turns orange, and when I click again, it turns white again.

But I have two questions :

  1. When comparing color with rgb in part
    if(document.getElementById('homem').style.backgroundColor == 'rgb(#FF6600)') or if(document.getElementById('homem').style.backgroundColor == '#FF6600')

    It doesn’t work because it won’t turn white again. Where I’m going wrong?

  2. This is the best way to encode the color alternation in 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>

javascript css html5

2 answers

2


1) Your code is making the comparison backgroundColor == 'rgb(#FF6600)' but the value of background color is rgb(255, 102, 0)

2) You can do it using a class that changes the default style. So you enable or disable the class by clicking. Follow the example below:

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>

  • Aaaah, I got it !! thank you so much for the @André explanation, it was great help

1

You’re setting the color with 'orange' and comparing with 'rgb(#FF6600)' have to compare with the same value you set.

Best to use a variável or a checkbox(the most used).

  • In the man I define '(#FF6600)' and compare it and it won’t. The woman yes I Seto Orange and it works

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.