CODEWITHSUNDEEP
javascripthtmlcss
user8023293
user8023293

Reputation: 67

Dropdown menu to change background image does nothing

This is my first question on Stack Overflow (so sorry if I do something wrong)

Anyway, I'm trying to create a drop down menu that changes the background image of the website. However, when selecting the options, nothing happens.

EDIT My WORKING code for this is:

function changeTheme()
    {
        var e = document.getElementById("bg");
        var strUser = e.options[e.selectedIndex].text;
        if (strUser == "default")
        {
            document.body.style.backgroundImage = "url(Thresh_BG.png)";
        }
        if (strUser == "darkstar")
        {
            document.body.style.backgroundImage = "url(dark star.png)";
        }
    }
<div id="bg">
  <form>
    <select name="bg" id="bg" onchange="changeTheme();">
      <option value="default">Default</option>
      <option value="darkstar">Dark Star Thresh</option>
    </select>
  </form>
</div>

Upvotes: 1

Views: 623

Answers (5)

Rachel Gallen
Rachel Gallen

Reputation: 28583

Firstly, i would declare your variable outside the function with a more specific name than 'e'. Also, you should add inner [single] quotes to your image .

It's always a good idea to include the full path even if it's local on your server. Makes it easier to spot an error. I include a jsbin witn my own images (they are used in the below snippet also)

Hope this helps

Welcome to stackoverflow!

var selecte = document.getElementById("bg");

function changeTheme() {

  var strUser = selecte.options[selecte.selectedIndex];
  if (strUser.value == "default") {
    document.body.style.backgroundImage = "url('http://www.rachelgallen.com/images/purpleflowers.jpg')";
  }
  if (strUser.value == "darkstar") {
    document.body.style.backgroundImage = "url('http://www.rachelgallen.com/images/yellowflowers.jpg')";
  }
};
<form>
  <select id="bg" onchange="changeTheme();">
    <option value="default">Default</option>
    <option value="darkstar">Dark Star Thresh</option>
  </select>
</form>

Upvotes: 0

Team Work
Team Work

Reputation: 35

here my working code check it

function changeTheme() {
  console.log('work');
  var e = document.getElementById("bg").value;
  if (e == "default") {
    document.body.style.backgroundImage = "url(1.jpg)";
  }
  if (e == "darkstar") {
    document.body.style.backgroundImage = "url(2.jpg)";
  }
}
<html>

<body background="1.jpg">
  <div id="abc">

  </div>

  <form>
    <select name="bg" id="bg" onchange="changeTheme();">
    					<option value="default">Default</option>
    					<option value="darkstar">Dark Star Thresh</option>
    				</select>
  </form>

</body>

</html>

Upvotes: 0

Jayesh Nayak
Jayesh Nayak

Reputation: 159

function changeTheme(e)
{
    var e = document.getElementById("bg");
    var strUser = e.options[e.selectedIndex].value;
    if (strUser == "default")
    {
   //  document.body.style.backgroundImage = "url('img_tree.png')";
        document.body.style.backgroundImage = "url('http://kenrockwell.com/nikon/d5300/sample-images/DSC_0024.jpg')";
    }
    else if (strUser == "darkstar")
    {
        document.body.style.backgroundImage = "url('https://www.w3schools.com/css/trolltunga.jpg')";
    }
}

please check the jsfiddle link: https://jsfiddle.net/jayesh24/bdxLvvbo/

Upvotes: 0

Matthias Raes
Matthias Raes

Reputation: 75

for startes, I'm pretty sure you need more quotes. Try changing it like this: 

***Code***
if (strUser == "default")
    {
        document.body.style.backgroundImage = "url('Thresh_BG.png')";
    }
    if (strUser == "darkstar")
    {
        document.body.style.backgroundImage = "url('dark star.png')";
    }

If you use the URL like that, you'll need to make sure that the background-images are in the same folder as the HTML. (Which is bad practice?). Better make a 'content' folder and make an 'images' folder there. Of course you would have to update your URL's to match the new location of your images. (relative, of course).

If I were you, I'd use a switch statement too (if you want to upgrade your webpage and you have more than two options, it's going to be hard to put multiple if-statements. Something like this: 

switch(strUser)
    case "default": 
        document.body.style.backgroundImage = "url('Thresh_BG.png')";
        break;
    case "darkstar":
        document.body.style.backgroundImage = "url('dark star.png')";
        break;
    ***more options here***
    default: break;

Edit I also see you have two ID's the same, which is also bad practice as your Javascript doesn't know which one to pick. So you might want to change that.

Another small remarkt, are you sure you need the 'text' value of the select? You might want to ask for the value instead of the text.

Upvotes: 0

orabis
orabis

Reputation: 2809

First, you have id collision in your HTML. You may change the id of your div to be anything other than bg; let's say bg1.

Then, you need to access the value of an option rather than its text, so it will be:

var strUser = e.options[e.selectedIndex].value;

Upvotes: 2

Related Questions