如何更新动态输入控件的背景颜色？

Question

I'm successfully creating some dynamic input textboxes using the following javascript:

var type = "Textbox";
var foo = document.getElementById("fooBar");

for (i = 1; i <= totalQty; i = i + 1) {

    var textbox = document.createElement("input");
    //Assign different attributes to the element.
    textbox.setAttribute("type", type + i);
    //textbox.setAttribute("value", type + i);
    textbox.setAttribute("name", type + i);
    textbox.setAttribute("id", type + i);
    textbox.setAttribute("style", "width:300px");
    textbox.setAttribute("width", "300px");

    //Append the element in page (in span).
    var newline = document.createElement("br");
    foo.appendChild(newline);
    foo.appendChild(textbox);
}

Everything works fine with that. Once the user keys in data and clicks submit however, I need to go back and set the background-color of any textboxes with an error to red. I found some code to do the actual coloring:

textbox.style.backgroundColor = "#fa6767";

...and I know the exact name of the textbox with the error (ie "Textbox1", "Textbox2", "Textbox3", etc) but I'm not sure how to programatically assign this background color code to the specific textbox. I can't use something like this, since all code is dynamically generated:

errorTextbox = $("#Textbox1");

Any suggestions?

Answer 1

It looks like you're building a form validation script. Here's an easier way to do this:

1) Create an entry in your stlyesheet for your error class. Adding and removing a class requires fewer steps than assigning properties individually.

.error {
    background-color: #ff0000;
}

2) Give all the textboxes you wish to validate a unique class name "valMe", for example.

3) Then loop through them during the validation step:

 $('.valMe').each(function() {
           $(this).removeClass('error');
           if($(this).text=='') {
               $(this).addClass('error');
           }
    })

By using "this" you refer to the current element, so you don't even need to know the ID of the element.

Answer 2

If you already know the name (in this case identical to the id ) of the element, you can use jQuery to select the element by forming the selector using string concatenation. Assuming you have a variable that stores the name / id of the text box that has the error, then it's a relatively simple process:

var errorTextboxName = 'Textbox1';
$('#' + errorTextboxName).css('background-color', 'red');

Answer 3

I ended up going with the following:

document.getElementById('Textbox1'.style.backgroundColor = "#fa6767";

I originally didn't think I would be able to capture my "Textbox1" control in this fashion since when I viewed the html source code, there was no "Textbox1" due to the fact I dynamically created it.

Thanks.