How to create a random identifier for a body tag when loading a page using a set of identifier arrays

Question

Here is my problem:

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

The background image is set on the body tag, as well as the background color. I need the body tag to be arbitrarily assigned to a different identifier whenever the page loads.

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

The last part is that I need a generator to choose only between the identifiers that I set in the css file.

Here is 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 pretty well crack codes to do what I need, but I'm not good enough to write my own code for these types of things.

Answer 1

• Save the possible identifiers in a list (array).
• Create a random integer using Math.random() and Math.floor() .
• Select an item from the list.
• Set the id attribute to the value of the element.

Example (jQuery is not required for this simple script):

 $(function(){ //<-- That 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 fills the number. With the size of list 2, the following numbers are possible: 0 and 1, which is what we want, because the array indices are based on zero.

Answer 2

 var ids = ['body_1', 'body_2', 'body_3']; $(function () { $('body').attr('id', ids[Math.floor(Math.random()*ids.length)]) }); 

Demo

if you constantly put css ads, just put it at the bottom of the page

  <script> document.body.id = "body_" + Math.floor(Math.random()*[NUMBER_OF_DECLARATIONS]); </script> </body> 

Answer 3

I would use simple classes instead of ID selectors in your CSS. Therefore, define several classes in CSS, and then use the following snippet to assign a random class.

 var classes = [ "classBg1", "classBg2", "classBg3" ]; $.ready( function() { var nextClass = classes[ Math.round( classes.length * Math.random() ) ]; $('body').addClass( nextClass ); }); 

Answer 4

You need to create an array with valid identifiers, and then extract a random element from it.

Answer 5

You can use Math.random() to generate a random number. between 0 and 1. Then you can Math.floor() take the nearest number. and then assign it to body tags and ask them to choose one based on what is generated by the Math.random() functions

Answer 6

You should probably use a class, and instead of jQuery you should use simple DOM calls. It is said:

 var classList = ["v1","v2","v3","v4"]; document.body.className = classList[Math.round(Math.random()*4)]; 

Answer 7

First, determine the highest tag you can use, assuming base #body_1

 var iMax = $("style:contains('#body_')").length; 

Then set the random element of the body tag:

 $('body').attr('id','body_' + (Math.floor(iMax)+1)); 

That should do it.