Defining the color of a div in rgb

Question

Defining the color of a div in rgb

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I'm doing a div, where clicking it turns orange, and clicking again, it goes back to white.

But I have two questions:

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

It does not work because it does not turn white again. Where am I going wrong?

Is this the best way to encode color to 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 html5 css

asked by anonymous 16.10.2017 / 14:08

2 answers

1

You are setting the color with 'orange' and comparing with 'rgb(#FF6600)' has to compare with the same value as set.

It is best to use a variável or a checkbox (the most used).

16.10.2017 / 14:24

Help with innerHTML in Javascript Incorrect count of $ _FILE fields

score 2 · Accepted Answer

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

2) You can do this by using a class that changes the default style. This enables you to enable or disable the class when clicking. Here's 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>