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