Change the body color with each click

Question

Change the body color with each click

Asked 7 years, 3 months ago

Viewed 1,027 times

1

I have knowledge in HTML and CSS intermediate and am studying Javascript.

I can change the background of the body with event OnClick() usually only once.

I wanted me to click again he’d switch to another color

<!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>

I believe it’s a simple thing I’m not getting

2 answers

2

Your job mudarCor provides only one color. You have N ways to do this, but to give examples you could have an array/color list and make the function choose one at random.

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>

That part of Math I haven’t studied yet... I tried using a list/array...tried the for command, but it didn’t work.. or I knew how to use it?

– Soreze martins

2017/08/16 at 19:14

Browser other questions tagged javascript

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

by Diego Marques • **3,701** points · Answer 1 · 2017-08-16T19:08:08+00:00

Another idea would be to generate a totally random color:

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>

That one "Math" is a Javascript object for mathematical functions: https://www.w3schools.com/js/js_math.asp

Math.floor round down a number: https://www.w3schools.com/jsref/jsref_floor.asp

Math.random generates a random number: https://www.w3schools.com/jsref/jsref_random.asp

In this case the logic is the generation of a random number in decimal and is converted to hexadecimal to generate the color code, from 000000 until FFFFFF