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

Question

I have the following HTML:

<div id="tab1" style="position:relative; background-image:url(buttons/off.png);
    <a href="javascript:ChangeBackgroundImageOfTab('tab1', 'on');">
        <img id="DivBtn1" name="DivBtn1" src="buttons/text.png" >
    </a>
</div>

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?

Through this call : <a href="javascript:ChangeBackgroundImageOfTab('tab1', 'on');"> - It is just a string. when the user clicks on the image inside of the link node, the function gets called and the value of 'on' gets sent into the function, signifying we need to change the background image of the parent div to on.png — ayla
– ayla, Commented Sep 6, 2013 at 20:05
you have incorrectly formatted the image path it should be 'url("buttons/" ' + imagePrefix + ' ".png")'; — Sankara
– Sankara, Commented Sep 6, 2013 at 20:06
You'll also want to use style.backgroundImage, not style.background-image. — Marc Baumbach
– Marc Baumbach, Commented Sep 6, 2013 at 20:07

fonini · Accepted Answer · 2014-01-29 18:45:37Z

64

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

edited Jan 29, 2014 at 18:45

fonini

3,3717 gold badges36 silver badges59 bronze badges

answered Sep 6, 2013 at 20:07

TyMayn

1,9362 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Thomas Over a year ago

Why are the " being included within the string? And I hadn't seen until now, but you can't have - in a property, or variable, name (it'll be interpreted as an operator), use camel-case: backgroundColor.

ayla Over a year ago

creating the string seperatly worked. putting it inline didnt work, but compiled and ran correctly with no errors. thanks for the help!

TyMayn Over a year ago

Cool. Some people think that creating your string separate like this is creating more code. I find doing this helps with debugging, as I can then see exactly whats going to be assigned using the ol' console.log. :)

ayla Over a year ago

@TyMayn totally. i agree. so much easier for debugging, when you can just hover over a variable instead of typing it into the console or the immediate window.

Derek · Accepted Answer · 2013-09-06 20:21:53Z

9

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')";

edited Sep 6, 2013 at 20:21

Derek

3,4351 gold badge20 silver badges35 bronze badges

answered Sep 6, 2013 at 20:08

moritzpflaum

7294 silver badges10 bronze badges

1 Comment

saber tabatabaee yazdi Over a year ago

getelementbyId doesnt need #divname only name of the id without #

champion-runner · Accepted Answer · 2020-12-04 20:45:15Z

0

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.

answered Dec 4, 2020 at 20:45

champion-runner

1,6771 gold badge17 silver badges27 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related