Wondering if anybody could help with what seems a very simple problem but is taxing for this noob.

I set myself the task of creating a button which, when pressed, switches the background color randomly. It seems to work well enough but the random number it works from only generates once at page load.

As a workaround, I added a second 'Reset Page' button, but I really want just one button that switches the page color every time you prod it. Any ideas how to reset the random number to achieve this?

Here's the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
	<h1>Click the button to change the color</h1>
    <form action = "">
        <input type = "button"
               value = "Click Me"
               onclick = "changeColor('color')"/>
	    <input type= "button" 
				 value = "Reset color"
                 onclick = "reloadPage()" />
  	<script type = "text/javascript">
		var number = Math.random();
	  	var biggerNumber = number * 6;
	  	var randomnumber = Math.ceil(biggerNumber);
	  function changeColor(color){
	  	if (randomnumber == 1) {
	  		(document.body.style.backgroundColor = "olive");
	  		if (randomnumber == 2) {
	  			(document.body.style.backgroundColor = "blue");
	  			if (randomnumber == 3) {
	  				(document.body.style.backgroundColor = "red");
	  				if (randomnumber == 4) {
	  					(document.body.style.backgroundColor = "yellow");
	  					if (randomnumber == 5) {
	  						(document.body.style.backgroundColor = "maroon");
	  						if (randomnumber == 6) {
	  							(document.body.style.backgroundColor = "silver");
function reloadPage()



Just figured it out.

I needed the random number generator INSIDE the change color function rather than outside it.