Change a background image of a style in css using javascript

Question

Trying to change the background image of a div class background in CSS using javascript based on a hard-coded variable: See Function below:

<script type="text/javascript">
    function checkLocation() {
        var loctype="UH";
        if(loctype=localonly)
            document.getElementsByClassName('dropdown-content').style.backgroundImage="url(./img/LocalConn.jpg)";
        else if(loctype=UH)
            document.getElementsByClassName('dropdown-content').style.backgroundImage="url(./img/UHConn.jpg)";
        else
            document.getElementsByClassName('dropdown-content').style.backgroundImage="url(./img/MoodleUHConn.jpg)";
            }
</script>

Called in HTML page see code below:

<div class="dropdown">
                <button class="dropbtn"></button>
                <div class="dropdown-content">
                    <div class="media">
                        <div class="media-left">
                        <a href="#"> <script type="text/javascript">checkLocation();</script>  </a>
                        </div>
                    </div>

.CSS Code for the drop-down content class

/* The container <div> - needed to position the dropdown content */
.dropdown {
    float: right;
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    right:0px;
    margin-top:67px;
    margin-right:20px;
    background-color: #f9f9f9;
    min-width: 125px;
    height:150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    background-image:url(../img/LocalConn.jpg);
}

Please help as this isn't working must be something staring at my face but can't figure any help appreciated??

missing one point on the path? url(./img/MoodleUHConn.jpg) must be url(../img/MoodleUHConn.jpg) — DaniP
– DaniP, Commented Sep 16, 2016 at 19:07
getElementsByClassName() returns an array-like collection of elements, not an individual element. You should switch it to an id or use document.getElementsByClassName('dropdown-content')[0].style.backgroundImage — skyline3000
– skyline3000, Commented Sep 16, 2016 at 19:07
Tried the document.getElementsByClassName('dropdown-content')[0].style‌.backgroundImage but it's still not working. — kbbkirl
– kbbkirl, Commented Sep 16, 2016 at 19:14

4lackof · Accepted Answer · 2016-09-16 19:28:28Z

2

These lines, e.g.

document.getElementsByClassName('dropdown-content')[0].style.backgroundImage="url(./img/MoodleUHConn.jpg)";

need to have quotes inside url():

document.getElementsByClassName('dropdown-content')[0].style.backgroundImage="url('./img/MoodleUHConn.jpg')";

Also, change this css

background-image:url(../img/LocalConn.jpg);

to

background-image:url('../img/LocalConn.jpg');

edited Sep 16, 2016 at 19:28

4lackof

1,40016 silver badges35 bronze badges

answered Sep 16, 2016 at 19:08

The One and Only ChemistryBlob

7,90211 gold badges41 silver badges76 bronze badges

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

Comments

4lackof · Accepted Answer · 2016-09-16 19:22:45Z

1

The problem is document.getElementsByClassName() will always return an Array of HTML elements. So, you need to apply style to the HTML element not the array. And localonly is undefined

Your <script> should be like this

<script type="text/javascript">
    function checkLocation() {
        var loctype="UH";
        if(loctype=localonly)
            document.getElementsByClassName('dropdown-content')[0].style.backgroundImage="url(./img/LocalConn.jpg)";
        else if(loctype=UH)
            document.getElementsByClassName('dropdown-content')[0].style.backgroundImage="url(./img/UHConn.jpg)";
        else
            document.getElementsByClassName('dropdown-content')[0].style.backgroundImage="url(./img/MoodleUHConn.jpg)";
            }
</script>

edited Sep 16, 2016 at 19:22

4lackof

1,40016 silver badges35 bronze badges

answered Sep 16, 2016 at 19:17

Pranesh Ravi

19.2k10 gold badges51 silver badges70 bronze badges

1 Comment

kbbkirl Over a year ago

Tried this solution also to no avail.

score 0 · Accepted Answer · 2016-09-19 21:15:26Z

0

Your function should look like this:

function checkLocation(){
    var loctype = "UH"; //if your setting variable (loctype) statically then there shouldn't be any logic, because it will always return TRUE for (loctype === "UH")
    var image = (loctype === "UH") ? "url('./img/MoodleUHConn.jpg')" : (loctype === "localonly") ? "url('./img/LocalConn.jpg')" : "url('./img/MoodleUHConn.jpg')";
    document.getElementsByClassName('dropdown-content')[0].style.backgroundImage = image;           
}

If your just trying to trigger the event, you don't need an <a> tag you can just use a <div> tag and attach an onclick event listener like so:

<div onclick="checkLocation()">Toggle Background Image</div>

also in your CSS the background-image: property in the .dropdown-content class needs quotes around the path like so:

background-image: url('../img/LocalConn.jpg');

edited Sep 19, 2016 at 21:15

answered Sep 16, 2016 at 19:59

user7892649

3 Comments

kbbkirl Over a year ago

Tried the above function but still not getting any image to appear.

kbbkirl Over a year ago

user7892649 Over a year ago

@kbbkirl yes sry left the quotes inside the strings out, go ahead and run it now.

Collectives™ on Stack Overflow

Change a background image of a style in css using javascript

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related