How to change background color randomly in HTML with JavaScript?
Question by toky
this web page changes the backgrounder color randomly. i am having trouble to do the same thing with “#title” ,but the color stays the same.
please help
Thank you
JavaScript code:
function setbackground()
{
window.setTimeout( "setbackground()", 80); // milliseconds delay
var index = Math.round(Math.random() * 9);
var ColorValue = "FFFFFF"; // default color - white (index = 0)
if(index == 1)
ColorValue = "66FF33";
if(index == 2)
ColorValue = "FF0000";
if(index == 3)
ColorValue = "FF00FF";
if(index == 4)
ColorValue = "0000FF";
if(index == 5)
ColorValue = "00FFFF";
if(index == 6)
ColorValue = "FFFF00";
if(index == 7)
ColorValue = "CC66FF";
if(index == 8)
ColorValue = "3366FF";
if(index == 9)
ColorValue = "CCCCCC";
document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;
}
function setbackgroundTitle()
{
window.setTimeout( "setbackgroundTitle()", 600); // milliseconds delay
var index = Math.round(Math.random() * 4);
var ColorValue = "FFFFFF"; // default color - white (index = 0)
if(index == 1)
ColorValue = "66FF33";
if(index == 2)
ColorValue = "FF0000";
if(index == 3)
ColorValue = "FF00FF";
if(index == 4)
ColorValue = "0000FF";
document.getElementById("title")[0].style.backgroundColor = "#" + ColorValue;
}
CSS code:
#title{
background-color:#11f22f;
height:300px;
width:400px;
margin:25px auto 0 auto;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
html Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HomeWork</title>
<script type="text/javascript" src="crazy.js"> </script>
<link rel="stylesheet" type="text/css" href="HomeWork2.css" />
</head>
<body>
<body onload="setbackground();">
<div id="title" onload="setbackgroundTitle();"> hjhjhkj dfvdfsv dfgvkdfsk dfs</div>
</body>
</html>
Answer by godlark
First, copy paste error: instead document.getElementById("title")[0].style.backgroundColor = "#" + ColorValue; there should be document.getElementById("title").style.backgroundColor = "#" + ColorValue;
According with that How to make a div onload function? doesn’t work.
I’ve put everything to setbackground() and it works 😉
Answer by Starx
The problem may be that the DOM wasn’t loaded when the script was running.
Correct your function to this, you are assuming the output of document.getElementById("title") as an array, but its not.
document.getElementById("title").style.backgroundColor = "#" + ColorValue;
And call it on the onload event, to ensure the DOM is loaded properly when the script runs
window.onload = function() {
setbackgroundTitle();
};
