CODEWITHSUNDEEP
javascripthtmlhtml-select
Bill Bllson
Bill Bllson

Reputation: 179

Select element not working

I have a really simple code I just wrote that gets a color value from a select element and uses it to set the border color of elements in a specific class, it doesn't seem to work though though. Here's the code:

HTML:

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

There are more options in the same format as Red and Blue, but I left them out to save space.

Here's the JavaScript:

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

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

Upvotes: 1

Views: 1403

Answers (1)

tymeJV
tymeJV

Reputation: 104775

Couple issues,

The first is you're missing the () in your function declaration, it should be:

function changeColor() { 

}

The second thing is getElementByClassName is getElementsByClassName (notice the "s" at the end of Elements) - and this will return a collection, so you must specify the index:

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

Also, (thanks @AmmarCSE for seeing this) - the style property you're after is backgroundColor - not backGroundColor (JS is VERY case sensitive)

Another important note would be to always have the console open when developing, you'll be able to see what errors are occurring and where. (Usually F12 to open the console on most browsers)

Upvotes: 4

Related Questions