Question

I have a table like so

<table>
  <tr id="trRow1" runat="server" style="display: none">
    <td>First Name:</td>
    <td><asp:Label id="lblFirstName" runat="server"></asp:Label></td>
  </tr>
  <tr>
    <td>Last Name:</td>
    <td><asp:Label id="lblLastName" runat="server"></asp:Label></td>
  </tr>
</table>

As you can see, initially the first row is not being displayed. When the user clicks a certain radio button on the page an asynchronous postback occurs, and at that time I set the style of trRow1 to “inline”. Nothing fancy; nothing new. It works just great.

Or at least up until I try to do the following in a javascript function.

function Test() {       
  var obj = trRow1.getElementsByTagName("select");
  alert(obj.length);
}

At the point I call Test(), I get an error that says “Microsoft JScript runtime error: ‘trRow1’ is undefined.”

My guess is it has something to do with the fact that I’m messing with setting the Display style using AJAX, and for whatever reason the DOM can’t find trRow1 even after I set it’s display to “inline”.

Can anyone throw me a bone on this one? I’m stuck.

Answer 1

The object trDegree is not defined, by your naming conventions looks like trDegree is a table row element, I think that you’re trying to do something like this:

function WTF() {       
  var trDegree = document.getElementById('trDegree'); // Locate the element
  var obj = trDegree.getElementsByTagName("select");
  alert(obj.length);
}

Further Reference:

• element.getElementsByTagName