Question

Here’s my issue:

I have a very simple html website teaser right now with a large background image (www.iambold.org).

The background image is set up on the body tag, and so is the background color. What I need is for the body tag to be randomly assigned a different ID whenever the page is loaded.

The reason for this is that each separate ID will have a different background image and different background color associated with it.

The last part is that I need the generator to only select between the IDs that I have set in the css file.

Here’s the CSS for the body backgrounds:

body {font-family:'Lato',verdana,arial,sans-serif; font-size:14px; line-height:22px; }
body#body_1 {background:#fff url(../images/bg_splash.jpg) center -15px repeat-x;}
body#body_2 {background:#353932 url(../images/bg_splash2.jpg) center -15px repeat-x;}

I am familiar with jquery, and can hack codes well enough to do what I need, but I am not good enough to write my own code for these types of things.

Answer 1

1. Store the possible IDs in a list (array).
2. Generate a random integer using Math.random() and Math.floor().
3. Pick the element from the list.
4. Set the id attribute to the element’s value.

Example (no jQuery needed for this simple script):

$(function(){ //<-- That's jQuery, because `document.body` does not exist
              // in the head of the document.
    var styleIds = ["body1", "body2"];
    document.body.id = styleIds[ Math.floor(Math.random()*styleIds.length) ];
});

The Math.random() method returns a random number satisfying 0 <= x < 1. Math.floor floors the number. With a list size of 2, the possible numbers are: 0 and 1, which is what we want, because indexes of arrays are zero-based.