Modify CSS file using Math.Random();

Question

I am trying to have a background image changed using

Math.floor((Math.random());

One of the line in my CSS file which is called within my HTML file is:

.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img.png) no-repeat 0 0;}

What I am looking to do is use the following statement to get a random number from 1 to 4 and display different background images based on the number retrieved randomly. So I decided to delete the above line from the CSS file and add the following code in my HTML file:

var randomNumber = Math.floor((Math.random()*4)+1); // random number (no more than 4 or the array will be out of bounds)
if (randomNumber == 1) {
    document.write ('<style>.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img.png) no-repeat 0 0;}</style>');
}
if (randomNumber == 2) {
    document.write ('<style>.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img2.png) no-repeat 0 0;}</style>');
}
if (randomNumber == 3) {
    document.write ('<style>.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img3.png) no-repeat 0 0;}</style>');
}
if (randomNumber == 4) {
    document.write ('<style>.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img4.png) no-repeat 0 0;}</style>');
}

That produced a blank HTML page. I am trying to do this without creating four separate CSS file using the above method.

Why don't you just have styles named like "slider1", "slider2", etc. and then apply the class name based on the result of the Math.random() ? — Roddy of the Frozen Peas
– Roddy of the Frozen Peas, Commented Jun 6, 2013 at 21:37
You are overwriting the document, see developer.mozilla.org/en-US/docs/Web/API/… — stackunderflow
– stackunderflow, Commented Jun 6, 2013 at 21:42

fmodos · Accepted Answer · 2013-06-06 21:35:36Z

3

document.write will replace the current content. of the page by what you are writing.

Use: document.getElementsByClassName('slider') iterate through the elements and set the background image using element.style.backgroundImage=...

answered Jun 6, 2013 at 21:35

fmodos

4,5581 gold badge18 silver badges17 bronze badges

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

2 Comments

Si8 Over a year ago

Something like what hackNightly mentioned?

fmodos Over a year ago

Yes, basically that.... the only difference is that he posted a code example and I gave you the instructions on how to do it

Samuel Pinto · Accepted Answer · 2013-06-07 15:26:30Z

1

Try Jquery [fantastic] take a demo LIVE in fiddle

html:

<div class="slider"></div>

css:

.slider {
    width: 300px;
    height: 300px;
    -webkit-background-size:100% 100%;
    -moz-background-size:100% 100%;
    background-repeat:no-repeat;
    border: 2px black solid;
}

JavaScrip:

$(function () {
    var url = "http://maispc.com/samuel/content/images/",
        imgArray = [url+"avatar.png",
                   url+"provider/blogger.png",
                   url+"provider/LinkedIn-32x32.png",
                   url+"provider/myspace.png",
                   url+"provider/instagram.png",
                   url+"provider/Twitter-32x32.png",
                   url+"provider/stackoverflow.png",
                   url+"provider/Facebook-32x32.png"],
        randomNumber = Math.floor((Math.random() * imgArray.length)),
        baseUrl = "url('" + imgArray[randomNumber] + "')";

    $(".slider").css('background-image', baseUrl); })();

take a demo LIVE in fiddle

edited Jun 7, 2013 at 15:26

answered Jun 6, 2013 at 22:17

Samuel Pinto

96912 silver badges8 bronze badges

4 Comments

Si8 Over a year ago

So remove the background URL completely from the .slider class and use the JavaScript to add it. Correct?

Si8 Over a year ago

I tried adding your code and the Background image is missing now, please see here: interfaithmedical.com/Portal/index2.php (the random image works but there is an error now) I commented out the script and I do not see the error.

Si8 Over a year ago

Actually NVM... The path to the background image was wrong!!! You helped me and I accepted your answer. Thank you.

Samuel Pinto Over a year ago

I have updated the example here and in JSFiddle.. check it out.

Hacknightly · Accepted Answer · 2013-06-06 21:45:47Z

1

Since the only thing that's changing is the background image, I'd just apply the style using javascript. Something like

var randomNumber = Math.floor((Math.random()*4)+1),
    sliders = document.getElementsByClassName('slider');

Array.prototype.forEach.call(sliders, function (elm) {
  elm.style.background = 'url(images/slide-img' + randomNumber + '.png)';
});

this has not been tested

edited Jun 6, 2013 at 21:45

answered Jun 6, 2013 at 21:39

Hacknightly

5,1743 gold badges28 silver badges27 bronze badges

4 Comments

Fabrício Matté Over a year ago

AFAIK getElementsByClassName returns a HTMLCollection/NodeList which does not inherit from the Array prototype (no forEach method). Better explained on Why can't I use forEach or map on a NodeList?

Hacknightly Over a year ago

Yes, though I'm not in a position to test it, that should get you on the right track.

Si8 Over a year ago

I should have the CSS and then the script or the other way around listed on the page?

Si8 Over a year ago

I was able to rectify the issue taking your code and Samual's and get it to work. Thanks.

Collectives™ on Stack Overflow

Modify CSS file using Math.Random();

3 Answers 3

2 Comments

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related