Элемент, который не работает

Question

У меня действительно простой код, который я только что написал, который получает значение цвета из элемента select и использует его для установки цвета рамки элементов в определенном классе, но, похоже, он работает не так. Вот код:

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() { 

} 

Вторая вещь is getElementByClassName is getElementsByClassName (обратите внимание на «s» в конце Elements) - и это вернет коллекцию, поэтому вы должны указать индекс:

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

Кроме того, (спасибо @AmmarCSE для просмотра этого) - style свойство вы после backgroundColor - не backGroundColor (JS ОЧЕНЬ чувствителен к регистру)

Еще одно важное замечание будет всегда иметь консоль открывается при разработке, вы сможете увидеть, какие ошибки происходят и где. (Обычно F12 открывает консоль в большинстве браузеров)