Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

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

So, I wrote a short script, by which depending on the race the player chooses the backgroundimage is surposed to change:
document.getElementById("map_1").style.backgroundImage= "url("; +["race"] + ".png)";
console.log("Javascript sucess. = " + document.getElementById("map_1").style.backgroundImage);

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.)


  • edited March 2017
    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.
    $('#map_1).css("background-image", "url("; +["race"] + ".png)");  

    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.
  • How are you creating the '#map_1' element and where does it reside?
Sign In or Register to comment.