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