How do I use a JS variable in document.getElementById().style?

Question

I want to make it so when ever I reload the page, the background gets chosen randomly.

function switchBG(urlThing) {
        document.getElementById("bg-img").style.display="block";
        document.getElementById("bg-img").style.backgroundImage="url(urlThing)";
    }

    var n = Math.floor((Math.random() * 2) + 1);

    if (n == 1) {
        switchBG('back1.jpg');
    }
    else if (n == 2) {
        switchBG('back2.jpg')
    }

I tried that, but nothing happened.

Edit: This is the div. It's the first thing under the tag.

<div id="bg-img"></div>

You need to concatenate the `urlThing` variable with the `backgroundImage` style text. As is, you're just putting it as a literal string, which won't work. — CertainPerformance, Jun 07 '18 at 08:18

score 0 · Answer 1 · answered Jun 07 '18 at 08:19

0

You need to concatenate the variable like this:

document.getElementById("bg-img").style.backgroundImage="url(" + urlThing + ")";

answered Jun 07 '18 at 08:19

nsayer

799
2
8
21

It doesn't seem to work – YaYPIXXO Jun 07 '18 at 09:17
You also need to choose a width and a height. Otherwise the div is empty. – nsayer Jun 07 '18 at 09:38

score 0 · Accepted Answer · answered Jun 07 '18 at 08:29

0

I am assuming bg-img is the <img> tag. this is how you can do it

function switchBG(urlThing) {
    document.getElementById("bg-img").style.display="block";
    var loc = window.location.pathname;
    var dir = loc.substring(0, loc.lastIndexOf('/'));
    document.getElementById("bg-img").src=dir + urlThing;
}

answered Jun 07 '18 at 08:29

pilku

120
3
8

bg-img is a
– YaYPIXXO Jun 07 '18 at 08:58
Ok then,for div you can use `document.getElementById("bg-img").style.backgroundImage="url(" + urlThing + ")"; ` also press f12 and check in styles if your image is loaded. if it is then you need to add css to that div to display image try `` – pilku Jun 07 '18 at 09:21
That worked, but how do I make the div fill the body? – YaYPIXXO Jun 07 '18 at 09:31
try changing css, I gave that css just to make img visible. – pilku Jun 07 '18 at 09:35
if you want the div to fill the body try `` – nsayer Jun 07 '18 at 09:37
Thank you so much! – YaYPIXXO Jun 07 '18 at 09:45

How do I use a JS variable in document.getElementById().style?

2 Answers2