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??

Answer 1

These lines, eg

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

Answer 2

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>

Answer 3

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