How to change background color randomly in HTML with JavaScript?

Question

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>

In the future, consider using anonymous functions as opposed to strings for setTimeout. setTimeout(function(){setbackgroundTitle()}, 600); will suffice. — Jeffrey Sweeney
– Jeffrey Sweeney, Commented Mar 24, 2012 at 21:58
General code tip: if you have several if statements like this they will all be run each time, even if index is 1. Use a switch statement instead. Or in this case, a even better solution is to store all the color values in an array, and use myColorArray[index] to get your value. — Martin Hansen
– Martin Hansen, Commented Mar 24, 2012 at 23:52
this is the same as stackoverflow.com/questions/25455485/… — Patrick W. McMahon
– Patrick W. McMahon, Commented Aug 27, 2014 at 21:45

Community · Accepted Answer · 2017-05-23 11:56:26Z

1

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 ;)

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Mar 24, 2012 at 22:38

godlark

1577 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ildar · Accepted Answer · 2012-03-24 22:00:15Z

1

try so:

document.getElementById("title").style.backgroundColor = "#" + ColorValue;

answered Mar 24, 2012 at 22:00

Ildar

7962 gold badges15 silver badges36 bronze badges

1 Comment

toky Over a year ago

no change , maybe the problem is in the html file. any suggestions?

Vincent Mimoun-Prat · Accepted Answer · 2012-03-24 22:03:39Z

0

If that is homework, please tag your question as homework.

Else, jQuery would make your life as simple as:

$("body").css("background", "#456789");

or

$("h1").css("background", "#456789");

answered Mar 24, 2012 at 22:03

Vincent Mimoun-Prat

28.6k16 gold badges85 silver badges126 bronze badges

3 Comments

Starx Over a year ago

It's not a tagged jQuery too dude :)

Vincent Mimoun-Prat Over a year ago

Not tagged jQuery does not mean I should not suggest a simple solution to a question. As of today, I see no point to use pure Javascript in 95% of the cases (homework is a valid reason though, to learn the language :)

Starx Over a year ago

Guys in the jQuery Project certainly WOULD see the point. Chill out man.

Starx · Accepted Answer · 2012-03-24 22:09:19Z

0

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();
};

answered Mar 24, 2012 at 22:09

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Collectives™ on Stack Overflow

How to change background color randomly in HTML with JavaScript?

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related