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

Member Avatar for stbuchok

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

explaining what stbuchok said... :) you need to this..
document.getElementById(category.id).style.backgroundColor =color;

thanks guys i just add ".id" to this

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

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

and it worked

thanks bra

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.