CODEWITHSUNDEEP
javascripthtmlcssbackground-image
kbbkirl
kbbkirl

Reputation: 3

Change a background image of a style in css using javascript

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

Upvotes: 0

Views: 2168

Answers (3)

user7892649
user7892649

Reputation:

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

Upvotes: 0

The One and Only ChemistryBlob
The One and Only ChemistryBlob

Reputation: 7884

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

Upvotes: 2

Pranesh Ravi
Pranesh Ravi

Reputation: 19133

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>

Upvotes: 1

Related Questions