Odd behavior in javascript

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

Answer 2

I don't see any variable for trDegree in your sample. You would need to have trDegree loaded before calling getElementsByTagName.

For example:

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

or you could just load the tags from the document level. I'm not sure if this is the effect you want though.

function WTF() {
  var obj = document.getElementsByTagName("select");
  alert(obj.length);
}

Answer 3

The solution is in the first answer. U must get the element before using it adding this line:

var trRow1 = document.getElementById('trRow1');