Solution 1 :

First, you use identifier text twice for different elements. Attribute id is a unique attribute, so I specified a different id for the <select> tag.

Second, I used event onchange for the <select> tag instead of the onclick event for the <option> tags, because this way is correct.

Third, a single function using the argument element is enough to assign a color. And to assign a color, we use the value of attribute value of the <option> tag. So you can add a new option tag with the desired color.

function color(element) {
    document.getElementById("text").style.color = element.value;
<label for="color">Choose a color: </label>
<select id="text_select" onchange="color(this)" name="colorpicker">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="purple">Purple</option>

<p id="text">This text changes color</p>

Solution 2 :

Press f12 on your browser or go to settings -> dev tools(some like this..) and go to console from the menu (Inspector|Style|Console and read the error and copy it to here.

I tried your code block at another place and it returned an error. Please share the error message. And for future works search in the net for “your error message at console e.g. (ReferenceError: error message text), have a nice work.

You cannot give the same id to another element on the page. Try learning JS in depth by reading or watching videos.

Problem :

Hey i started learning JS today and i thought of trying to make a drop down color changer , i have tried many things but i cant seem to get it to work, i also tried onchange instead of onclick but still nothing , any help appreciated


<label for="color">Choose a color: </label>
<select id="text" name="colorpicker">
    <option value="red" onclick="red()">Red</option>
    <option value="green" onclick="green()">Green</option>
    <option value="blue" onclick="blue()">Blue</option>
    <option value="purple" onclick="purple()">Purple</option>

<p id="text">This text changes color</p>


function red() {
    console.log((document.getElementById("text").style.color = "red"));
function green() {
    console.log((document.getElementById("text").style.color = "green"));
function blue() {
    console.log((document.getElementById("text").style.color = "blue"));
function purple() {
    console.log((document.getElementById("text").style.color = "purple"));


Comment posted by ceejayoz

You need an onchange event for the select, and you need to look into how to get the value of a select field as part of that event.

Comment posted by MGR

Could you explain how this works or what to search in order to learn this thanks!

Comment posted by s.kuznetsov

@MGR, I have edited my reply with the explanation above.

Comment posted by edit

Your answer could be improved with additional supporting information. Please