getElementById succeeds once then returns null

Question

I'm new to javascript and this is driving me nuts. I'm attempting to set the text and color of a label ("lblerrmsg") depending upon the value of a flag ("IsValid"). I've written a function in a .js file and have attached it to web site that I built with VS.

The function - specifically getElementById('lblErrMsg') works correctly the first time it is called, but in subsquent calls it returns null. (Don't know if this is relevant - but there are no posts between calls to the function.)

Following is the relevant portion of the function:

// If IsValid is false - make the text red
var ErrMsg = document.getElementById('lblErrMsg');
if (IsValid) {
    document.activeElement.style.color = 'navy';
    ErrMsg.outerHTML = 'valid';
}
else {
    document.activeElement.style.color = 'red';
    ErrMsg.outerHTML = "*** Invalid Entry ***";
    ErrMsg.style.color = 'red';
}


<asp:TextBox ID="tbNumber" runat="server"></asp:TextBox>
<asp:Label ID="lblErrMsg" runat="server" ForeColor="Red" 
    Text="   xxx" ></asp:Label>

Answer 1

try to change the class name of the div or element to change the css style if you want

  document.getElementById("blah").className = "cssclass";

this way you can control the css depending on the flag of yours.

Answer 2

ErrMsg.outerHTML = 'valid';

If you do that, you have destroyed the previous ErrMsg and the new content will not have the id anymore (so that it cannot be found by getElementById).

Are you sure you don't want innerHTML?