title: Javascript: document.getElementbyID(..) is null or not an object
body: <p>I can't seem to figure as to why the javascript code below gives me the document.getelementbyid is null or not an object on this line:
  line: 111. As to my knowledge all should be working as ive declared everything</p>
  
  <pre><code>var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
  </code></pre>
  
  <p>Here's the complete code:</p>
  
  <pre><code>    &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Scrolling Data Grid&lt;/title&gt;
  &lt;style&gt;
  /* ==================================================================== */
  /* SCROLLING DATA GRID - IE ONLY!                                       */
  /* ==================================================================== */
  /* 
  Tables inside a scrollingdatagrid should have:
   1. border-collapse:separate
   2. No border or margin
   3. Background colors on all cells to avoid bleed-thru on scroll
   4. cellspacing="0" on the &lt;table&gt; tag itself
  */
  DIV.scrollingdatagrid {
      overflow-x:auto;
      overflow-y:auto;
      position:relative;
      padding:0px;
  }
  DIV.scrollingdatagrid TABLE {
      width : 98.7%; /* Make room for scroll bar! */
      margin:0px;
      border:0px;
      border-collapse:separate;
  }
  DIV.scrollingdatagrid TABLE TR .locked, DIV.scrollingdatagrid TABLE THEAD TR, DIV.scrollingdatagrid TABLE TFOOT TR {
      position:relative;
  }
  /* OffsetParent of the TR is the DIV because it is position:relative */
  DIV.scrollingdatagrid TABLE THEAD TR {
      top:expression(this.offsetParent.scrollTop);
  }
  
  
  /* Make the z-index values very clear so overlaps happen as expected! */
  DIV.scrollingdatagrid TD, DIV.scrollingdatagrid TH { z-index:1; }
  DIV.scrollingdatagrid TD.locked, DIV.scrollingdatagrid TH.locked { z-index:2; }
  DIV.scrollingdatagrid THEAD TR, DIV.scrollingdatagrid TFOOT TR { z-index:3; }
  DIV.scrollingdatagrid THEAD TR TH.locked { z-index:4; }
  &lt;/style&gt;
  
  
  &lt;script type="text/javascript"&gt;
  window.onload = function(){ write_it() }
  
  function write_it() {
  
  var cn      =   new ActiveXObject("ADODB.Connection")
  var rs      =   new ActiveXObject("ADODB.Recordset")
  var dbFile  =   "imts.mdb"
  var dbPath  =   "G:\\AS\\Asf\\ASF\\IMTS\\V8\\database\\"
  
  var mySQL   = "SELECT * FROM tbl_imts WHERE [FILE NUMBER] LIKE '%99%'"
  var html    = ""
  
  cn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + dbPath + dbFile + "");
  rs.Open(mySQL, cn, 1, 3)
  
  html += '&lt;table id="mstrTable" style="table-layout: fixed; font-family: arial; font-size: 9pt;" cellpadding="0" cellspacing="0"&gt;\n'
  html += '&lt;thead&gt;\n'
  html += '&lt;tr&gt;\n'
  html += '&lt;th class="locked" style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; height: 30px; width: 20px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;#&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(0).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(1).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(2).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(3).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(4).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(5).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(6).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(7).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(8).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(9).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(10).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(11).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(12).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(13).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(14).name + '&lt;/th&gt;\n'
  html += '&lt;th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: none; padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);"&gt;' + rs.fields(15).name + '&lt;/th&gt;\n'
  html += '&lt;/tr&gt;\n'
  html += '&lt;/thead&gt;\n'
  
  rs.MoveFirst
  var i = 0
  html += '&lt;tbody&gt;\n'
  while (!rs.eof) {
  ++i
      html    +=  '&lt;tr style="color: rgb(102,102,102)"&gt;\n'
      html    +=  '&lt;td class="locked" style="height: 20px; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);"&gt;'+i+'.&lt;/td&gt;\n'
      for (var r = 0; r &lt; rs.fields.count; ++r) {
      if (!rs.fields(r).value) { rs.fields(r).value = "&amp;nbsp;" }
      html    +=  '&lt;td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;"&gt;'+rs.fields(r).value+'&lt;/td&gt;\n'
      }//end of for
      html    +=  '&lt;/tr&gt;\n'
      rs.MoveNext 
      }//end of while
  html += '&lt;/tbody&gt;\n'
  html += '&lt;/table&gt;\n'
  document.getElementById("p1").innerHTML = html
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="p1" class="scrollingdatagrid" style="width:800px;height:200px;border:1px solid rgb(128,128,128);"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  (function() {
  var color = "#E1E0D7"
  var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
  var n = rows.length;
  var bgcs = [];
  for(var i=0; i&lt;n; ++i) bgcs[i] = rows[i].style.backgroundColor;
  //rows[0].style.backgroundColor = color;
  function changeColor(e) {
  if(!e) e = window.event;
  var o = e.target? e.target: e.srcElement;
  if (o.tagName == "TH") { return }
  while(o.tagName &amp;&amp; o.tagName.toLowerCase()!="tr") o = o.parentNode;
  for(var i=0; i&lt;n; ++i) {
  rows[i].style.backgroundColor = bgcs[i];
  if(rows[i]==o) {
                  rows[i].style.backgroundColor = color
                  }
  }
  }
  if(document.addEventListener) for(var i=0; i&lt;n; ++i) rows[i].addEventListener("click", changeColor, false);
  else for(var i=0; i&lt;n; ++i) rows[i].attachEvent("onclick", changeColor);
  })();
  &lt;/script&gt;
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>