CODEWITHSUNDEEP
javascripthtmlbackground-image
kushtrimh
kushtrimh

Reputation: 916

How to change background image of div with select tag, using javascript?

How can i change the background image of my div using the select tag so when a certain option is selected the background changes, this is my code:

<div class="idcard" id="idcard-div"></div>
<div class="select-idcard" id="idcard-select">
        <p>Select Background Image</p>
        <select>
            <option id="idcard-option1" value="blue">Default/Blue</option>
            <option id="idcard-option2" value="red">Red</option>
            <option id="idcard-option3" value="purple">Purple</option>
            <option id="idcard-option4" value="green">Green</option>
        <select>
    </div>

Javascript code:

var changeBgColor = function(){
        var idCardBg = document.getElementById("idcard-div");
        if(document.getElementById("idcard-option1").value === "blue"){
            idCardBg.style.backgroundImage = "url('tigerbg.jpg')";
        }else if(document.getElementById("idcard-option2").value === "red"){
            idCardBg.style.backgroundImage = "url('redbg.jpg')";
        }else if(document.getElementById("idcard-option3").value === "purple"){
            idCardBg.style.backgroundImage = "url('purplebg.jpg')";
        }else if(document.getElementById("idcard-option3").value === "green"){
            idCardBg.style.backgroundImage = "url('greenbg.jpg')";
        }else{
            idCardBg.style.backgroundImage = "url('tigerbg.jpg')";
        }
    };

..

changeBgColor();

Upvotes: 0

Views: 2452

Answers (2)

Tamaro Tamaroidny
Tamaro Tamaroidny

Reputation: 221

HTML changes

<select id="colorSelect" onchange="changeBgColor();">
  <option value="blue">blue</option>
  <option value="red">red</option>
</select>

JS changes (using select.options array and its value)

var changeBgColor = function(){
  var idCardBg = document.getElementById("idcard-select");
  var colorSelect = document.getElementById("colorSelect");
  switch (colorSelect.options[colorSelect.selectedIndex].value)
  {
    case 'blue': idCardBg.style.backgroundImage = "url('bluebg.jpg')"; break;
    case 'red': idCardBg.style.backgroundImage = "url('redbg.jpg')"; break;
    default:
      idCardBg.style.backgroundImage = "url('tigerbg.jpg')";
    break;
  }
}

Upvotes: 1

GolezTrol
GolezTrol

Reputation: 116110

You've made couple of mistakes.

First of all, the ids don't match, and you used the attribute class instead of id on the div.

Also, you should get the value of the select element, not of its options.

And lastly, you must of course attach the event to the select element. I've done that in HTML in the snippet below, but you can do it in JavaScript too, using the onchange property or using addEventListener.

So, besides a well-meant advice to follow a tutorial on events, I would like to suggest you to have a look at the developer tools in your browser. They contain a JavaScript console that shows errors if code is run. So as soon as you attached the event, you can have a look at the console to find the other errors.

Anyway, this time I've done that for you. Below is the fixed snippet. I also use the value to set a background color, so you can roughly see it working without having access to the actual images.

var changeBgColor = function(){
      
  var idCardBg = document.getElementById("idcard");
  idCardBg.style.backgroundImage = "url('tigerbg.jpg')";

  if(document.getElementById("select-idcard").value === "blue"){
    idCardBg.style.backgroundImage = "url('tigerbg.jpg')";
  }else if(document.getElementById("select-idcard").value === "red"){
    idCardBg.style.backgroundImage = "url('redbg.jpg')";
  }else if(document.getElementById("select-idcard").value === "purple"){
    idCardBg.style.backgroundImage = "url('purplebg.jpg')";
  }else if(document.getElementById("select-idcard").value === "green"){
    idCardBg.style.backgroundImage = "url('greenbg.jpg')";
  }else{
    idCardBg.style.backgroundImage = "url('tigerbg.jpg')";
  }
  idCardBg.style.backgroundColor = document.getElementById("select-idcard").value;

};
<div id="idcard">
  <p>Select Background Image</p>
  <select onchange="changeBgColor();" id="select-idcard">
    <option id="idcard-option1" value="blue">Default/Blue</option>
    <option id="idcard-option2" value="red">Red</option>
    <option id="idcard-option3" value="purple">Purple</option>
    <option id="idcard-option4" value="green">Green</option>
  </select>
</div>

Upvotes: 1

Related Questions