Question

这是我关于Stack Overflow的第一个问题（如果我做错了就很抱歉）

无论如何，我正在尝试创建一个更改网站背景图片的下拉菜单。但是，在选择选项时，没有任何反应。

编辑我的工作代码是：

＆＃13;

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)";
        }
    }

＆＃13;

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

＆＃13;

Answer 1

首先，您的HTML中存在ID冲突。您可以将div的id更改为bg以外的任何值;让我们说bg1。

然后，您需要访问选项的值而不是其文本，因此它将是：

me

Answer 2

首先，我很确定你需要更多报价。尝试改变它：

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

如果您使用这样的网址，则需要确保背景图片与HTML位于同一文件夹中。（这是不好的做法？）。最好制作一个'content'文件夹并在那里制作'images'文件夹。当然，您必须更新您的网址以匹配图片的新位置。（相对，当然）。

如果我是你，我也会使用switch语句（如果你想升级你的网页，你有两个以上的选项，那么很难放出多个if语句。像这样：

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;

修改我也看到你有两个ID相同，这也是不好的做法，因为你的Javascript不知道选择哪一个。所以你可能想要改变它。

另一个小注意事项，你确定你需要选择的'text'值吗？您可能想要询问值而不是文本。

Answer 3

这里我的工作代码检查

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>

Answer 4

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

请检查jsfiddle链接： https://jsfiddle.net/jayesh24/bdxLvvbo/

Answer 5

首先，我会在函数外声明你的变量，其名称比'e'更具体。此外，您应该为图像添加内部[单个]引号。

即使它在您的服务器上是本地路径，也包含完整路径始终是个好主意。更容易发现错误。我在我自己的图片中添加了jsbin（它们也在下面的代码段中使用）

希望这有帮助

欢迎来到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>

用于更改背景图像的下拉菜单不起作用

5 个答案: