Javascript中的随机背景图片

Question

here's my code:

function drawBgrImage() {

    var random = Math.round(Math.random() * 8 + 1);
    var folder;
    var path;

    if (window.innerWidth <= 768) {
        folder = "xs";
    } else if (window.innerWidth <= 1200) {
        folder = "sm";
    } else {
        folder = "lg";
    }

    path = '"url(/wp-content/themes/BLANK-Theme/images/' + folder + '/' + random + '.jpg)"';
    console.log(path);
    document.getElementById("bgrImg").style.backgroundImage = path;
    /*document.getElementById("bgrImg").style.backgroundImage = "url(/wp-content/themes/BLANK-Theme/images/lg/2.jpg)";*/
}


window.onload = drawBgrImage();

In folders xs, sm and lg I have 9 .jpg files. Function .drawBgrImage() is to draw a number from 1 to 9 and set image background on specified #bgrImg. although var path returns the same value, as commented line it doesn't work.

Any ideas? Thanks in advance.

Answer 1

It doesn't work because onload should be a function, however you don't provide one. It should be:

window.onload = drawBgrImage;

By putting parentheses after function name you invoke it immediately and assign window.onload return value (which is undefined in your case).

Another issue is that you wrapped path url into unnecessary quotes. Fix it like this:

path = 'url(/wp-content/themes/BLANK-Theme/images/' + folder + '/' + random + '.jpg)';

Answer 2

Replace:

path = '"url(/wp-content/themes/BLANK-Theme/images/' + folder + '/' + random + '.jpg)"';

with:

path = 'url(/wp-content/themes/BLANK-Theme/images/' + folder + '/' + random + '.jpg)';