how to make a pull down menu which chnages background color-CodePudding

i've tried to make a pulldown menu which changes the page background color, but it doesnt work. any suggestions?

<body>

<select name="colors" onechange="changeColors(this)">
    <option value="blue">Blue</option>
    <option value="#868B8E">Grey</option>
    <option value="#FFC55C">Orange</option>
</select>

<script src="images8.js"></script>
</body>

the js

function changeColor(event)
{
    var color = event.value;
    document.getElementsByTagName('BODY')[0].style.backgroundColor=color;
    
}

CodePudding user response：

Your code runs fine when the typos are corrected:

onechange -> onchange

changeColors(this) -> changeColor(this)

See working snippet

You might want to add an onl oad event to begin with the default colour.

function changeColor(event)
{
    var color = event.value;
    document.getElementsByTagName('BODY')[0].style.backgroundColor=color;
    
}

<select name="colors" onchange="changeColor(this)">
    <option value="blue">Blue</option>
    <option value="#868B8E">Grey</option>
    <option value="#FFC55C">Orange</option>
</select>

CodePudding user response：

You have few typos in your code:

Function call is "changeColors" but the function name is "changeColor".

Also the correct event name is "onchange" not "onechange"