Javascript 更改背景图像的下拉菜单不起任何作用

这是我关于堆栈溢出的第一个问题（如果我做错了，那么很抱歉）

无论如何，我正在尝试创建一个下拉菜单来更改网站的背景图像。但是，在选择选项时，不会发生任何事情

编辑我的工作代码是：

函数changeTheme（）
{
var e=document.getElementById（“bg”）；
var strUser=e.options[e.selectedIndex].text；
如果（strUser==“默认值”）
{
document.body.style.backgroundImage=“url（Thresh_BG.png）”；
}
如果（strUser==“暗星”）
{
document.body.style.backgroundImage=“url（dark star.png）”；
}
}

违约
黑星脱粒机

首先，HTML中存在id冲突。您可以将div的id更改为bg以外的任何内容；比如说bg1

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

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

---

对于startes，我很确定你需要更多的报价。 尝试如下更改：

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

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;

如果这样使用URL，则需要确保背景图像与HTML位于同一文件夹中。（哪种做法不好？）。最好在那里创建一个“内容”文件夹和一个“图像”文件夹。当然，您必须更新URL以匹配图像的新位置。（当然是相对的）

如果我是你，我也会使用switch语句（如果你想升级你的网页，并且你有两个以上的选项，那么很难放置多个If语句）。 大概是这样的：

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

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不知道选择哪一个。所以你可能想改变这一点

---

另一个小问题是，您确定需要select的“text”值吗？您可能希望请求该值而不是文本。

这里是我的工作代码检查它

函数changeTheme（）{
console.log（“工作”）；
var e=document.getElementById（“bg”）.value；
如果（e==“默认值”）{
document.body.style.backgroundImage=“url（1.jpg）”；
}
如果（e==“黑星”）{
document.body.style.backgroundImage=“url（2.jpg）”；
}
}

违约
黑星脱粒机

请检查JSFIDLE链接：

---

首先，我要在函数外部声明变量，并使用比“e”更具体的名称。 此外，您应该在图像中添加内[单]引号

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

希望这有帮助

欢迎来到stackoverflow

var selecte=document.getElementById（“bg”）；
函数changeTheme（）{
var strUser=selecte.options[selecte.selectedIndex]；
如果（strUser.value==“默认值”）{
document.body.style.backgroundImage=“url（'http://www.rachelgallen.com/images/purpleflowers.jpg')";
}
如果（strUser.value==“暗星”）{
document.body.style.backgroundImage=“url（'http://www.rachelgallen.com/images/yellowflowers.jpg')";
}
}；

违约
黑星脱粒机

开发者工具控制台中的任何错误都会对每个元素使用不同的id。此处

div

和

select

具有相同的id

bg

。这可能就是问题所在。您正在对div使用id

bg

并选择错误的id。使用不同的id。

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

@user8023293我们不发布“谢谢”，你接受答案！检查。你只能接受每个问题的一个答案，但当你达到15个代表时，你可以对问题和答案进行投票。接受答案可以得到2分。如果你也首先以你的风格/css定义bg图像，那么可能是最好的选择