javascript - 选择元素不起作用

Question

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

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

Answer 1

几个问题，

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

function changeColor() { 

}

第二个是 getElementByClassName 是 getElementsByClassName(注意 Elements 末尾的“s”)- 这将返回一个集合，因此您必须指定索引:

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

此外，(感谢@AmmarCSE 看到了这个)- 您所追求的 style 属性是 backgroundColor - 而不是 backGroundColor(JS 是非常区分大小写)

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