assigning a div a background via javascript is working in jsfiddle.net but not in code

Question

https://copy.com/XPfxgQeHF78d8lgw is a link to the files the link to the fiddle is here http://jsfiddle.net/LgjzvcpL/9/

I have tried eliminating everything I can on the real life version but that doesn't help

document.getElementById("image").style.backgroundImage = "url(" + dir + images[randomCount] + ".jpg" +  ")";

In your fiddle you have lots of DIVs with the same `id="abc"`. IDs should be unique. — Barmar, Oct 25 '14 at 02:37
assigning the background image to the div id image works in the jsfiddle but doesn't work in real life (the copy link) - could anyone help me please
The multiple abc ids are just filler text for now — Matthew Kelly, Oct 25 '14 at 02:37
You're running your code before the DOM is loaded, so `document.getElementById()` doesn't find anything. — Barmar, Oct 25 '14 at 02:40

score 0 · Accepted Answer · edited May 23 '17 at 12:11

0

You need to run your code after the DOM is loaded. Either move it to after the </body> tag, or run it in the window.onload handler.

Also, your assignment statements need to end with ;, not ,.

window.onload = function() {
    var dir = 'http://seriousphotography.co.uk/HD-Site/images/album/01/';
    var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
    var images = new Array;
    images[1] = "01";
    images[2] = "02";
    images[3] = "03";
    images[4] = "04";
    images[5] = "05";
    images[6] = "06";
    images[7] = "07";
    images[8] = "08";
    images[9] = "09";
    images[10] = "10";
    document.getElementById("image").style.backgroundImage = "url(" + dir + images[randomCount] + ".jpg" +  ")"; 
};

It would be simpler to write it as:

window.onload = function() {
    var dir = 'http://seriousphotography.co.uk/HD-Site/images/album/01/';
    var images = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10"];
    var randomCount = Math.floor(Math.random() * images.length);
    document.getElementById("image").style.backgroundImage = "url(" + dir + images[randomCount] + ".jpg" +  ")"; 
};

See Get random item from JavaScript array

Using classes and jQuery, it would be:

$("#image").addClass("image"+images[randomCount]);

Fiddle: http://jsfiddle.net/barmar/LgjzvcpL/12/

edited May 23 '17 at 12:11

Community

1
1

answered Oct 25 '14 at 02:42

Barmar

741,623
53
500
612

Thanks for trying but that unfortunately did not seem to work? – Matthew Kelly Oct 25 '14 at 02:51
If you weren't skipping `0`, you could just do `var images = ["01", "02", ...];` Why does your array start at 1? – Barmar Oct 25 '14 at 02:55
because I have learned my website coding by reverse engineering from seeing how others have done it so sometimes I mess up - I really was planning on having it randomly assign the div a class from image01 through to image10 so that I could have one js control all pages with just a separate block of local css control where the images are for the script - if you can show me a better way I would appreciate it! – Matthew Kelly Oct 25 '14 at 03:01
I've added a simpler version. – Barmar Oct 25 '14 at 03:06
thanks sorry to bother you again but if you look at this http://jsfiddle.net/LgjzvcpL/11/ it is what I really want out of the script - can javascript randomly add class - via image[RandomNumber] to #image – Matthew Kelly Oct 25 '14 at 03:11
Assign to the `className` property instead of `style.XXX`. Or since you're using jQuery, use its `.addClass()` method. – Barmar Oct 25 '14 at 03:15
Im not sure if I am doing it right window.onload = function() { var images = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10"]; var randomCount = Math.floor(Math.random() * images.length); document.getElementById("image").className ="'image' + images[randomCount]"; }; doesn't work but if I choose a specific one lets say document.getElementById("image").className ="image01"; it loads the image – Matthew Kelly Oct 25 '14 at 03:24
Get rid of the single quotes in `"'image'"`. It should be `"image"+images[randomCount]` – Barmar Oct 25 '14 at 03:29

assigning a div a background via javascript is working in jsfiddle.net but not in code

1 Answers1