Javascript-Setting background image of a DIV via a function and function parameter

Question

I have the following HTML    lt div id  tab1  style  position relative  background-image url buttons off png        lt a href  javascript ChangeBackgroundImageOfTab  tab1    on     gt           lt img id  DivBtn1  name  DivBtn1  src  buttons text png   gt       lt  a gt   lt  div gt    and the following Javascript   function ChangeBackgroungImageOfTab tabName  imagePrefix        document getElementById tabName  style background-image   url  buttons     imagePrefix     png         The issue arises when i try to set the tabs background image via a call to getElementByID - I do now know how to create a dynamic URL that uses the parameter that was passed in  along with some other hard coded values   In this case  we are swapping the OFF background image with the ON background image   How can i do this   Is there some way to use a javascript variable  assign the full path to it  then send it into the call as the background image path

User · Answer

If you are looking for a direct approach and using a local File in that case. Try

<div
style={{ background-image: 'url(' + Image + ')', background-size: 'auto' }}
/>

This is the case of JS with inline styling where Image is a local file that you must have imported with a path.

User · Answer

You need to concatenate your string   document getElementById tabName  style backgroundImage    url buttons     imagePrefix     png      The way you had it  it s just making 1 long string and not actually interpreting imagePrefix   I would even suggest creating the string separate   function ChangeBackgroungImageOfTab tabName  imagePrefix        var urlString    url buttons     imagePrefix     png        document getElementById tabName  style backgroundImage    urlString      As mentioned by David Thomas below  you can ditch the double quotes in your string  Here is a little article to get a better idea of how strings and quotes double quotes are related  http   www quirksmode org js strings html

User · Answer

From what I know  the correct syntax is   function ChangeBackgroungImageOfTab tabName  imagePrefix        document getElementById tabName  style backgroundImage    url  buttons     imagePrefix     png         So basically  getElementById tabName  backgroundImage and split the string like    cssInHere  and    javascriptOutHere     cssAgain

[javascript] Javascript-Setting background image of a DIV via a function and function parameter

Examples related to javascript

Examples related to html

Examples related to css

Examples related to url