使用下拉菜单选择背景

Question

我正在制作一个简单的HTML5 / CSS3 / JS网站，其中包括使用下拉菜单更改主题（背景）。但是，我的代码什么也没做。

             <div id="theme-picker">
        <form action="">
        <select name="themakeuze" id="thema" onchange="changeTheme();">
        <option value="dark" >Donker thema</option>
        <option value="light">Licht thema</option>
        </select>
        </form>
    </div>
    <script type="text/javascript">

        function changeTheme()
        {
            var e = document.getElementById("thema");
            var strUser = e.options[e.selectedIndex].text;
            if (strUser == "Donker thema")
            {
                document.body.style.backgroundImage = 'url(img/binding_dark.png)';
            }
            if (strUser == "Licht thema")
            {
                document.body.style.backgroundImage = 'url(img/binding_light.png)';
            }
        }
    </script>

我显然不是很擅长JavaScript。我们不允许任何图书馆。

Answer 1

（1）onchange事件应该应用于select本身：

<select name="thema" id="thema" onchange="changeTheme();">
<option value="dark">Donker thema</option>
<option value="light">Licht thema</option>
</select>

（2）以下行应放在函数changeTheme()内，而不是放在函数外：

var e = document.getElementById("thema");
var strUser = e.options[e.selectedIndex].text;

（3）if语句应正确写成：

if (strUser == "dark")

Answer 2

更改代码并在选项不在选项

中设置onchange =“changeTheme（）”

Answer 3

还在您尝试设置背景的前面添加“文档”。

document.body.style.backgroundImage = 'url(img/binding_dark.png)';