Problems with drop down color changer-CodePudding

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

HTML:

<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>
</select>

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

JAVASCRIPT:

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"));
}

CodePudding user response：

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>
</select>

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

CodePudding user response：

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.