选择元素不起作用

【问题标题】：Select element not working选择元素不起作用
【发布时间】：2015-08-19 06:07:38
【问题描述】：

我刚刚编写了一个非常简单的代码，它从一个选择元素中获取一个颜色值，并使用它来设置特定类中元素的边框颜色，但它似乎不起作用。代码如下：

HTML：

<select id="colorSelect" onChange="changeColor()">
    <option value="#000000" selected="selected">Black</option>
    <option value="#0000FF">Blue</option>
    <option value="#FF0000">Red</option>
</select>

还有更多与红色和蓝色格式相同的选项，但为了节省空间，我将它们省略了。

这是 JavaScript：

function changeColor
{
    var picker    = document.getElementById("colorSelect");
    var colorName = picker.options[picker.selectedIndex].value;

    document.getElementByClassName("bordered").style.backGroundColor=colorName;
}

【问题讨论】：

好吧，您缺少changeColor 的参数列表。确保您给我们提供有效的代码，以便我们修复它。

标签： javascript html html-select

【解决方案1】：

几个问题，

首先是您在函数声明中缺少()，它应该是：

function changeColor() { 

}

第二件事是getElementByClassName 是getElementsByClassName（注意元素末尾的“s”）——这将返回一个集合，所以你必须指定索引：

document.getElementsByClassName("bordered")[0].style.backGroundColor=colorName;

另外，（感谢 @AmmarCSE 看到这一点）- 您所追求的 style 属性是 backgroundColor - 不是 backGroundColor（JS 非常区分大小写）

另一个重要的注意事项是在开发时始终打开控制台，您将能够看到发生了什么错误以及发生在哪里。（在大多数浏览器上通常 F12 打开控制台）

【讨论】：

非常感谢，这是我第一次用 JavaScript 编写代码，不过你让我的代码正常工作。