Random colour

[thehealey]

I'm making a new website & I want to know if it’s possible for the background colour to be randomly selected from a list of hex codes? So every time you go to the page there’s a different background colour.

Thanks in advance.

[Twey]

<script type="text/javascript" src="http://www.twey.co.uk/pythonic.js"></script>
<script type="text/javascript">
  Twey.Pythonic.LOAD("Array.randomChoice");
  document.body.style.backgroundColor = "#" + [
    "fff",
    "000",
    "00f",
    "0ff",
    "0f0",
    "fff000"
  ].randomChoice();
</script>

Be careful that there's no text directly on top of this colour, though, or it might be unreadable sometimes. Also, don't forget users without scripting support -- always provide a default background colour or, if possible, generate the random colour server-side.

[jscheuer1]

This cannot be done with just HTML.

[Bob90]

I don't think loading an external script is really worth the hassle for such a simple script.
Having the script in the page eliminates the hotlinking to your own site and allows the coder to find out whats actually happening easier. (Twey, your external code is too sophisticated for begginers to understand.)

<script type="text/javascript">
colors = new Array();
colors[0] = "#FF0000";
colors[1] = "#FFCC00";
colors[2] = "#00FF00";
colors[3] = "#0000FF";
colors[4] = "#00FFCC";
colors[5] = "#CCFF00";
//etc

randomNumber = Math.floor(Math.random()*colors.length);

document.body.style.backgroundColor  = colors[randomNumber];
</script>

[Twey]

I don't think loading an external script is really worth the hassle for such a simple script.

Mm, probably true.

Having the script in the page eliminates the hotlinking to your own site and allows the coder to find out whats actually happening easier.

They could always download it, or even copy-and-paste it into the script wholesale. It's only there for convenience.

<script>

The type attribute is required.

colors = new Array();
colors[0] = "#FF0000";
colors[1] = "#FFCC00";
colors[2] = "#00FF00";
colors[3] = "#0000FF";
colors[4] = "#00FFCC";
colors[5] = "#CCFF00";

That's a lot of assignments. I think it would be more efficient and certainly easier to use an array literal. There's also no need for all those globals; to avoid cluttering the global namespace, perhaps wrap it in a new scope:

<script type="text/javascript">
  (function() {
    var colours = [
      "#FF0000",
      "#FFCC00",
      "#00FF00",
      "#0000FF",
      "#00FFCC",
      "#CCFF00"
    ];
    document.body.style.backgroundColor = colours[Math.floor(Math.random() * colours.length)];
  })();
</script>

[DimX]

(function() {
    var colours = [
      "#FF0000",
      "#FFCC00",
      "#00FF00",
      "#0000FF",
      "#00FFCC",
      "#CCFF00"
    ];
    document.body.style.backgroundColor = colours[Math.floor(Math.random() * colours.length)];
  })();

Just wondering, why are you using this anonymous function syntax?

[Twey]

So colours doesn't end up global. I'm not entirely sure if the cost of creating and running a function is worth it, but John reckon(s|ed) that it is.

[Bob90]

Very interesting points.
I didn't think about global declaration, I was just supplying the level of solution I thought met the request (i.e new coder requesting something very easy; they obviously need an introduction to most things.)

[DimX]

So colours doesn't end up global. I'm not entirely sure if the cost of creating and running a function is worth it, but John reckon(s|ed) that it is.

I see.
Yet there's one "bug" in your code. If it's placed into the head section, then it's not gonna work (document.body...), however document.bgColor works fine.

[Twey]

Yet there's one "bug" in your code. If it's placed into the head section, then it's not gonna work (document.body...), however document.bgColor works fine.

The bgColor property is deprecated for CSS. I was intending for it to be placed in the body, yes; I probably should have made that clearer.