Question

我正在从我的书中学习，它说我可以使用onselect事件而不是按钮来更改页面的背景颜色。我认为使用以下内容非常简单：

<select id="selColor" onselect="changeColor()">

和

function changeColor() {
    var selColor = document.getElementById("selColor");
    var color = selColor.value;
    document.body.style.backgroundColor = color;
}

但它失败了。我试着搜索但我找不到错误。

小提琴：http://jsfiddle.net/kL3Jz/2/

Answer 1

正如其他人所提到的，使用onchange代替onselect。但是，在HTML中使用内联事件通常被认为是不好的做法。我建议你用JavaScript添加事件处理程序。

<强> HTML

<h1>Please select a color</h1>

<fieldset>
    <select id="selectColor">
        <option value="#FFFFFF">White</option>
        <option value="#FF0000">Red</option>
        <option value="#FFCC00">Orange</option>
        <option value="#FFFF00">Yellow</option>
        <option value="#00FF00">Green</option>
        <option value="#0000FF">Blue</option>
        <option value="#663366">Indigo</option>
        <option value="#FF00FF">Violet</option>
    </select>
</fieldset>

<强>的JavaScript

document.getElementById('selectColor').onchange = function () {
    document.body.style.background = this.value;
};

小提琴： http://jsfiddle.net/kL3Jz/18/

您应该将JavaScript代码包装在window.onload = function () { ... }中，或将<script>标记放在<body>的末尾，就在结束标记之前。

Answer 2

尝试在onchange的地方说onselect。

<select id = "selColor" onchange = "changeColor()">

在小提琴中，您还必须选择No wrap-in <head>。

Answer 3

只需使用

<select id = "selColor"  onchange = "changeColor()">

而不是

<select id = "selColor" onselect = "changeColor()">

使用相同的功能

 function changeColor(){
        var selColor = document.getElementById("selColor");
        var color = selColor.value;
        document.body.style.backgroundColor = color;
      }

简单的JS，onclick更改背景颜色

3 个答案: