0

Im stuck with this color changing aspect of my website, can you please help. I have a dropdown with 4 options. I want a specific element that corresponds to the dropdown box to change color according to the option selected.

here is some code

<tr>
    <td>Application Architecture</td>
    <td><select name="cate1" id="cate1"   onchange ="changecolor(this,this.value)" >
			<option>----Select----</option>
			<option value="1" style="background-color:red">1</option>
			<option value="2" style="background-color:yellow">2</option>
			<option value="3" style="background-color:green">3</option>
			<option value="4">N/A</option>
   </select></td>
</tr>

<tr>
    <td>Architecture Change Management</td>
    <td><select name="cate2" id="cate2" onchange ="changecolor(this,this.value)">
			<option>----Select----</option>
			<option value="1" style="background-color:red">1</option>
			<option value="2" style="background-color:yellow">2</option>
			<option value="3" style="background-color:green">3</option>
			<option value="4">N/A</option>
		</select></td>
</tr>

the javascript looks like this so far.

function changecolor(category,color){
	if (color == 1){
	color ="red" ;
	}
	
	if(color == 2){
	color ="yellow";
	}
	
	if(color == 3){
	color = "green";
	}
	if(color==4){
	color="white";
	}
	

	

	alert(color);
	alert(category);
	document.getElementById(category).style.backgroundColor =color;
}

i tried passing both the element id and the element value (1,2,3 or 4) throught the onchange function. but when i use alert to show me the element is it show up as [object HTMLSelectElement]

i want it to say cate1 or cate2

i hope i was clear. any help is appreciated
thanks guys

3
Contributors
3
Replies
6
Views
6 Years
Discussion Span
Last Post by jaycastr
1

category is an object. changecolor(this,this.value) - this refers to the select tag, not it's id.

0

thanks guys i just add ".id" to this

onchange ="changecolor(this,this.value)"

onchange ="changecolor(this.id,this.value)"

and it worked

thanks bra

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.