Select 元素不工作

Question

我刚刚编写了一个非常简单的代码，它从 select 元素获取颜色值并使用它来设置特定 class 中元素的边框颜色，它不会虽然似乎工作。这是代码：

HTML:

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

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

这是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（注意元素末尾的 "s"）- 这将 return 是一个集合，因此您必须指定指数：

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

另外，（感谢@AmmarCSE 看到了这个）——你想要的 style 属性是 backgroundColor - 而不是 backGroundColor（JS 非常区分大小写)

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

Select 元素不工作

Select element not working

javascript

html

html-select