change color based on yes no

Question

User-807418713 posted

hello

This is my code if its yes then it should come with green color

if no then red color

var textBox1 = document.getElementById('ctl00_ContentPlaceHolder1_T3');
	var textBox2 = document.getElementById('ctl00_ContentPlaceHolder1_TextBox14');
	
	
	if (textBox1.value == textBox2.value)
		      document.getElementById("ctl00_ContentPlaceHolder1_TextBox24").value = 'Yes';
	else
		 document.getElementById("ctl00_ContentPlaceHolder1_TextBox24").value = 'No';

how to set 

Answer 1

User-474980206 posted

You set color of an element with style or css, but what element did you want to set the color of, and what property (font color, border color, background color, etc)

Answer 2

User61956409 posted

Hi Gopi.MCA,

if its yes then it should come with green color

if no then red color

If you'd like to specify red/green color for the TextBox, you can refer to the following code snippet. 

if (textBox1.value == textBox2.value) {
    document.getElementById("ctl00_ContentPlaceHolder1_TextBox24").value = 'Yes';
    document.getElementById("ctl00_ContentPlaceHolder1_TextBox24").style.color = "green";
}
else {
    document.getElementById("ctl00_ContentPlaceHolder1_TextBox24").value = 'No';
    document.getElementById("ctl00_ContentPlaceHolder1_TextBox24").style.color = "red";
}

Besides, if you want to apply custom styles to other elements, please clarify more about your requirement.

With Regards,

Fei Han

Answer 3

User-807418713 posted

hi

tried this not working

  document.getElementById("ctl00_ContentPlaceHolder1_TextBox24").style.color = "green";

Answer 4

User61956409 posted

Hi Gopi.MCA,

this not working

  document.getElementById("ctl00_ContentPlaceHolder1_TextBox24").style.color = "green";

Does it cause error in browser console tab? Please use browser developer tool to check if the html of 'ctl00_ContentPlaceHolder1_TextBox24' control look like this:

<input name="ctl00_ContentPlaceHolder1_TextBox24" id="ctl00_ContentPlaceHolder1_TextBox24" style="color: green;" type="text">

With Regards,

Fei Han

Answer 5

User-857013053 posted

<style>

.no_checked {
background: #F5A9A9;
}

</style>

<table id="qc_main_form">
<tr class="color_hover">

<td align="center">

<input type="radio" name="group1" value="1" checked="checked" class="spacer" />Yes
<input type="radio" name="group1" value="2" class="spacer" />No

</td>

</tr>

</table>

<script>

$('input:radio[value=1]').click(function () {
var $this = $(this);
$this.closest('td').removeClass('no_checked');
});
$('input:radio[value=2]').click(function () {
var $this = $(this);
$this.closest('td').addClass('no_checked');
});

</script>