1

Tenho conhecimento em HTML e CSS intermediário e estou estudando JavaScript.

Consigo mudar o o background do body com evento OnClick() normalmente somente uma vez.

Eu queria que eu clicasse novamente ele trocaria para outra cor

<!DOCTYPE html>
<html>
<head>
	<title>teste</title>
</head>
<body id="trocar" onClick="mudarCor()">

<p>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
</p>
<script type="text/javascript">
	function mudarCor(){
		document.getElementById('trocar').style.backgroundColor = "blue"
	}

</script>

</body>
</html>

Acredito que seja uma coisa simples que não estou conseguindo

2 Respostas 2

2

A tua função mudarCor prevê somente uma cor. Tens N maneiras de fazer isso, mas para dar exemplo podias ter uma array/lista de cores e fazer a função escolher uma ao acaso.

var cores = ['blue', 'red', 'yellow', 'pink', 'green', 'wheat'];

function mudarCor() {
  var el = document.getElementById('trocar');
  var proximoIndex = Math.floor(Math.random() * cores.length);
  var cor = cores[proximoIndex];
  el.style.backgroundColor = cor;
}
<body id="trocar" onClick="mudarCor()">
  <p>
    teste<br> teste
    <br> teste
    <br> teste
    <br> teste
    <br> teste
    <br> teste
    <br> teste
    <br> teste
    <br> teste
    <br> teste
    <br> teste
    <br>
  </p>


</body>

1
  • Essa parte de Math eu ainda nao estudei... eu tentei usar uma lista/array...tentei o comando for, mas nao funcionou..ou eu q n soube usar? Commented 16/08/2017 às 19:14
1

Uma outra ideia seria gerar uma cor totalmente aleatória:

function mudarCor(){
  document.getElementById('trocar').style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
}
<!DOCTYPE html>
<html>
<head>
	<title>teste</title>
</head>
<body id="trocar" onClick="mudarCor()">

<p>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
</p>
</body>
</html>

Esse "Math" é um objeto do JavaScript para funções matemáticas: https://www.w3schools.com/js/js_math.asp

Math.floor arredonda um número para baixo: https://www.w3schools.com/jsref/jsref_floor.asp

Math.random gera um número aleatório: https://www.w3schools.com/jsref/jsref_random.asp

Neste caso a lógica é a geração de um número aleatório em decimal e é convertido em hexadecimal para gerar o código da cor, de 000000 até FFFFFF

3
  • 1
    Essa parte do Math eu ainda não estudei...teria como explicar melhor? Commented 16/08/2017 às 19:12
  • Esse "Math" é um objeto do JavaScript para funções matemáticas: w3schools.com/js/js_math.asp Math.floor arredonda um número para baixo: w3schools.com/jsref/jsref_floor.asp Math.random gera um número aleatório: w3schools.com/jsref/jsref_random.asp Neste caso a lógica é a geração de um número aleatório em decimal e é convertido em hexadecimal para gerar o código da cor, de 000000 até FFFFFF Commented 16/08/2017 às 19:28
  • Dessa forma entedi Obrigado pessoal! Vou estudando outras maneiras, qualquer coisa posto novas dúvidas Commented 16/08/2017 às 20:04

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 .