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 (i.e. “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

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.