How to change background color using a class to target the ID of a control

▲
2
▼
<asp:TextBox ReadOnly="true" ID="tbPhone" ClientIDMode="Static" runat="server" CssClass="tbStyle changeUpdate" Text=""></asp:TextBox>
<asp:TextBox ReadOnly="true" ID="tbFax" ClientIDMode="Static" runat="server" CssClass="tbStyle changeUpdate" Text=""></asp:TextBox>

$('#tbPhone, #tbFax').keypress(function() { //works
    this.style.backgroundColor = "#BCFFB9";
});

I will have a lot of textboxes and wanted to use a class for each textbox, get the ID and set the background color. This will ensure I can use a few lines of code for all the textboxes, regardless of the number.

So i tried this:

$(".changeUpdate").keypress(function() {
    $(this).attr("id").style.backgroundColor = "#BCFFB9";
});

But I keep getting this error:

0x800a138f - Microsoft JScript runtime error: Unable to set value of the property 'backgroundColor': object is null or undefined

How can I resolve my issue.

jquery
asp.net
asked on Stack Overflow Mar 3, 2016 by Si8

2 Answers

▲
5
▼

You are kind of mixing Javascript and jQuery syntaxes, try this:

$(".changeUpdate").keypress(function() {
    //$(this).attr("id").style.backgroundColor = "#BCFFB9";
    $(this).css("background-color","#BCFFB9");
});
answered on Stack Overflow Mar 3, 2016 by Anubhab
▲
1
▼

You are not correctly selecting the elements with the class 'changeUpdate' with your code. $(this).attr("id") gets the id of the element, but does not select it, which is why there is an undefined reference error.

Use:

// when the keypress event happens on an element with class changeUpdate
$('.changeUpdate').keypress(function () {

   // Select all elements with class changeUpdate and change the css attribute 'background-color' to the color specified
   $('.changeUpdate').css('background-color', '#BCFFB9');
});

or use $(this).css('background-color', '#BCFFB9'); to change the background color for just the element with the keypress.

answered on Stack Overflow Mar 3, 2016 by RickL • edited Mar 10, 2016 by RickL

User contributions licensed under CC BY-SA 3.0