getElementByID("ID").style.backroundImage = url(img) doesnt show in browser

Tenshinzo

So, I wrote a short script, by which depending on the race the player chooses the backgroundimage is surposed to change:

<<script>>
document.getElementById("map_1").style.backgroundImage= "url(http://something.com/pics/race_"; + state.active.variables["race"] + ".png)";
console.log("Javascript sucess. map_1.style.backgroundImage = " + document.getElementById("map_1").style.backgroundImage);
<</script>>

which should change the background image from a div (map_1).
And it even outputs the correct filepath, and it works with normal html/css/js, but the browser doesn´t show any change in the div.
I dont want to change the class, because i would need about 20 different classes then.
Any suggestions?
(Using Sugarcube btw.)

SleeteWayne

What version of Sugarcube are you using? I'm assuming you have the script wrapped in a interactive macro so that it triggers?

You could also try the jQuery way which seems to be the most accepted way around here.

<<script>>
$('#map_1).css("background-image", "url(http://something.com/pics/race_"; + state.active.variables["race"] + ".png)");  
<</script>>

I just saw that you said you don't want to change classes and want to confirm your div's ID is set to map_1, right? Not just it's class? I only ask because you're getting the element by its id which can make a world of difference.

TheMadExile

How are you creating the '#map_1' element and where does it reside?