Change the color of an option when selected - JavaScript
I want an option to change color when selected by a user. For Example: a user selects the red option then a function would run that would change the color red. If the user then selected green then it would change green. etc.
<select onchange="changeColor();" class="color" id="rgb">
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
</select>
I'm started with the function below but im not sure where I went wrong.
function changeColor() {
var red = document.getElementById('red');
var green = document.getElementById('green');
var blue = document.getElementById('blue');
if(event.target.value == red) {
red.style.color = "red";
} else if(event.target.value == green) {
green.style.color = "green";
} else if(event.target.value == blue) {
blue.style.color = "blue";
} else {
alert("There was an error!");
}
};
javascript dom javascript-events html-select onchange
asked Nov 18 '18 at 0:10
GorblesGorbles
12
add a comment |
I want an option to change color when selected by a user. For Example: a user selects the red option then a function would run that would change the color red. If the user then selected green then it would change green. etc.
<select onchange="changeColor();" class="color" id="rgb">
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
</select>
I'm started with the function below but im not sure where I went wrong.
function changeColor() {
var red = document.getElementById('red');
var green = document.getElementById('green');
var blue = document.getElementById('blue');
if(event.target.value == red) {
red.style.color = "red";
} else if(event.target.value == green) {
green.style.color = "green";
} else if(event.target.value == blue) {
blue.style.color = "blue";
} else {
alert("There was an error!");
}
};
javascript dom javascript-events html-select onchange
asked Nov 18 '18 at 0:10
GorblesGorbles
12
add a comment |
I want an option to change color when selected by a user. For Example: a user selects the red option then a function would run that would change the color red. If the user then selected green then it would change green. etc.
<select onchange="changeColor();" class="color" id="rgb">
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
</select>
I'm started with the function below but im not sure where I went wrong.
function changeColor() {
var red = document.getElementById('red');
var green = document.getElementById('green');
var blue = document.getElementById('blue');
if(event.target.value == red) {
red.style.color = "red";
} else if(event.target.value == green) {
green.style.color = "green";
} else if(event.target.value == blue) {
blue.style.color = "blue";
} else {
alert("There was an error!");
}
};
javascript dom javascript-events html-select onchange
asked Nov 18 '18 at 0:10
GorblesGorbles
12
I want an option to change color when selected by a user. For Example: a user selects the red option then a function would run that would change the color red. If the user then selected green then it would change green. etc.
<select onchange="changeColor();" class="color" id="rgb">
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
</select>
I'm started with the function below but im not sure where I went wrong.
function changeColor() {
var red = document.getElementById('red');
var green = document.getElementById('green');
var blue = document.getElementById('blue');
if(event.target.value == red) {
red.style.color = "red";
} else if(event.target.value == green) {
green.style.color = "green";
} else if(event.target.value == blue) {
blue.style.color = "blue";
} else {
alert("There was an error!");
}
};
javascript dom javascript-events html-select onchange
javascript dom javascript-events html-select onchange
asked Nov 18 '18 at 0:10
GorblesGorbles
12
asked Nov 18 '18 at 0:10
GorblesGorbles
12
edited Nov 18 '18 at 0:15
Gorbles
asked Nov 18 '18 at 0:10
GorblesGorbles
12
asked Nov 18 '18 at 0:10
GorblesGorbles
12
asked Nov 18 '18 at 0:10
GorblesGorbles
12
12
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
It looks like you haven't added an 'event' parameter to your function. Try this:
function changeColor(event) {
var red = document.getElementById(red);
var green = document.getElementById(green);
var blue = document.getElementById(blue);
if (event.target.value == red) {
red.style.color = "red";
} else if (event.target.value == green) {
green.style.color = "green";
} else if (event.target.value == blue) {
blue.style.color = "blue";
} else {
alert("There was an error!");
}};
answered Nov 18 '18 at 0:16
nevacenevace
214
that's only 1/2 of how to add it
– charlietfl
Nov 18 '18 at 0:41
add a comment |
Try this. When you select an option you will recieve the <select> element in colorParam. If you select the first option, you will get Red in colorParam.value, but you are using IDs in lowerCase, so you can use toLowerCase() function to convert it. Then select the option element and apply styles.
function changeColor(colorParam) {
let color = colorParam.value.toLowerCase();
var optionElement = document.getElementById(color);
optionElement.style.color = color;
};<select onchange="changeColor(this);" class="color" id="rgb">
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
<option id="white" value="White">White</option>
<option id="pink" value="Pink">Pink</option>
</select>answered Nov 18 '18 at 0:19
eag845eag845
878611
add a comment |
I'm not sure you can style an <option> element. You can style the <select> element though. However, color doesn't seem to be a property you can change, background-color is.
If that's all you need you could as well inline the javascript code in the onchange handler attribute. You would need to set the values of the <option> elements to valid css colours.
<select onchange="this.style.backgroundColor=this.value">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>answered Nov 18 '18 at 0:37
customcommandercustomcommander
1,514819
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53356775%2fchange-the-color-of-an-option-when-selected-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
It looks like you haven't added an 'event' parameter to your function. Try this:
function changeColor(event) {
var red = document.getElementById(red);
var green = document.getElementById(green);
var blue = document.getElementById(blue);
if (event.target.value == red) {
red.style.color = "red";
} else if (event.target.value == green) {
green.style.color = "green";
} else if (event.target.value == blue) {
blue.style.color = "blue";
} else {
alert("There was an error!");
}};
answered Nov 18 '18 at 0:16
nevacenevace
214
that's only 1/2 of how to add it
– charlietfl
Nov 18 '18 at 0:41
add a comment |
It looks like you haven't added an 'event' parameter to your function. Try this:
function changeColor(event) {
var red = document.getElementById(red);
var green = document.getElementById(green);
var blue = document.getElementById(blue);
if (event.target.value == red) {
red.style.color = "red";
} else if (event.target.value == green) {
green.style.color = "green";
} else if (event.target.value == blue) {
blue.style.color = "blue";
} else {
alert("There was an error!");
}};
answered Nov 18 '18 at 0:16
nevacenevace
214
that's only 1/2 of how to add it
– charlietfl
Nov 18 '18 at 0:41
add a comment |
It looks like you haven't added an 'event' parameter to your function. Try this:
function changeColor(event) {
var red = document.getElementById(red);
var green = document.getElementById(green);
var blue = document.getElementById(blue);
if (event.target.value == red) {
red.style.color = "red";
} else if (event.target.value == green) {
green.style.color = "green";
} else if (event.target.value == blue) {
blue.style.color = "blue";
} else {
alert("There was an error!");
}};
answered Nov 18 '18 at 0:16
nevacenevace
214
It looks like you haven't added an 'event' parameter to your function. Try this:
function changeColor(event) {
var red = document.getElementById(red);
var green = document.getElementById(green);
var blue = document.getElementById(blue);
if (event.target.value == red) {
red.style.color = "red";
} else if (event.target.value == green) {
green.style.color = "green";
} else if (event.target.value == blue) {
blue.style.color = "blue";
} else {
alert("There was an error!");
}};
answered Nov 18 '18 at 0:16
nevacenevace
214
answered Nov 18 '18 at 0:16
nevacenevace
214
answered Nov 18 '18 at 0:16
nevacenevace
214
answered Nov 18 '18 at 0:16
nevacenevace
214
214
that's only 1/2 of how to add it
– charlietfl
Nov 18 '18 at 0:41
add a comment |
that's only 1/2 of how to add it
– charlietfl
Nov 18 '18 at 0:41
that's only 1/2 of how to add it
– charlietfl
Nov 18 '18 at 0:41
that's only 1/2 of how to add it
– charlietfl
Nov 18 '18 at 0:41
add a comment |
Try this. When you select an option you will recieve the <select> element in colorParam. If you select the first option, you will get Red in colorParam.value, but you are using IDs in lowerCase, so you can use toLowerCase() function to convert it. Then select the option element and apply styles.
function changeColor(colorParam) {
let color = colorParam.value.toLowerCase();
var optionElement = document.getElementById(color);
optionElement.style.color = color;
};<select onchange="changeColor(this);" class="color" id="rgb">
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
<option id="white" value="White">White</option>
<option id="pink" value="Pink">Pink</option>
</select>answered Nov 18 '18 at 0:19
eag845eag845
878611
add a comment |
Try this. When you select an option you will recieve the <select> element in colorParam. If you select the first option, you will get Red in colorParam.value, but you are using IDs in lowerCase, so you can use toLowerCase() function to convert it. Then select the option element and apply styles.
function changeColor(colorParam) {
let color = colorParam.value.toLowerCase();
var optionElement = document.getElementById(color);
optionElement.style.color = color;
};<select onchange="changeColor(this);" class="color" id="rgb">
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
<option id="white" value="White">White</option>
<option id="pink" value="Pink">Pink</option>
</select>answered Nov 18 '18 at 0:19
eag845eag845
878611
add a comment |
Try this. When you select an option you will recieve the <select> element in colorParam. If you select the first option, you will get Red in colorParam.value, but you are using IDs in lowerCase, so you can use toLowerCase() function to convert it. Then select the option element and apply styles.
function changeColor(colorParam) {
let color = colorParam.value.toLowerCase();
var optionElement = document.getElementById(color);
optionElement.style.color = color;
};<select onchange="changeColor(this);" class="color" id="rgb">
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
<option id="white" value="White">White</option>
<option id="pink" value="Pink">Pink</option>
</select>answered Nov 18 '18 at 0:19
eag845eag845
878611
Try this. When you select an option you will recieve the <select> element in colorParam. If you select the first option, you will get Red in colorParam.value, but you are using IDs in lowerCase, so you can use toLowerCase() function to convert it. Then select the option element and apply styles.
function changeColor(colorParam) {
let color = colorParam.value.toLowerCase();
var optionElement = document.getElementById(color);
optionElement.style.color = color;
};<select onchange="changeColor(this);" class="color" id="rgb">
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
<option id="white" value="White">White</option>
<option id="pink" value="Pink">Pink</option>
</select>function changeColor(colorParam) {
let color = colorParam.value.toLowerCase();
var optionElement = document.getElementById(color);
optionElement.style.color = color;
};<select onchange="changeColor(this);" class="color" id="rgb">
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
<option id="white" value="White">White</option>
<option id="pink" value="Pink">Pink</option>
</select>function changeColor(colorParam) {
let color = colorParam.value.toLowerCase();
var optionElement = document.getElementById(color);
optionElement.style.color = color;
};<select onchange="changeColor(this);" class="color" id="rgb">
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
<option id="white" value="White">White</option>
<option id="pink" value="Pink">Pink</option>
</select>answered Nov 18 '18 at 0:19
eag845eag845
878611
edited Nov 18 '18 at 0:45
answered Nov 18 '18 at 0:19
eag845eag845
878611
answered Nov 18 '18 at 0:19
eag845eag845
878611
answered Nov 18 '18 at 0:19
eag845eag845
878611
878611
add a comment |
add a comment |
I'm not sure you can style an <option> element. You can style the <select> element though. However, color doesn't seem to be a property you can change, background-color is.
If that's all you need you could as well inline the javascript code in the onchange handler attribute. You would need to set the values of the <option> elements to valid css colours.
<select onchange="this.style.backgroundColor=this.value">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>answered Nov 18 '18 at 0:37
customcommandercustomcommander
1,514819
add a comment |
I'm not sure you can style an <option> element. You can style the <select> element though. However, color doesn't seem to be a property you can change, background-color is.
If that's all you need you could as well inline the javascript code in the onchange handler attribute. You would need to set the values of the <option> elements to valid css colours.
<select onchange="this.style.backgroundColor=this.value">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>answered Nov 18 '18 at 0:37
customcommandercustomcommander
1,514819
add a comment |
I'm not sure you can style an <option> element. You can style the <select> element though. However, color doesn't seem to be a property you can change, background-color is.
If that's all you need you could as well inline the javascript code in the onchange handler attribute. You would need to set the values of the <option> elements to valid css colours.
<select onchange="this.style.backgroundColor=this.value">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>answered Nov 18 '18 at 0:37
customcommandercustomcommander
1,514819
I'm not sure you can style an <option> element. You can style the <select> element though. However, color doesn't seem to be a property you can change, background-color is.
If that's all you need you could as well inline the javascript code in the onchange handler attribute. You would need to set the values of the <option> elements to valid css colours.
<select onchange="this.style.backgroundColor=this.value">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select><select onchange="this.style.backgroundColor=this.value">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select><select onchange="this.style.backgroundColor=this.value">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>answered Nov 18 '18 at 0:37
customcommandercustomcommander
1,514819
edited Nov 19 '18 at 8:33
answered Nov 18 '18 at 0:37
customcommandercustomcommander
1,514819
answered Nov 18 '18 at 0:37
customcommandercustomcommander
1,514819
answered Nov 18 '18 at 0:37
customcommandercustomcommander
1,514819
1,514819
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53356775%2fchange-the-color-of-an-option-when-selected-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
