Javascript: document.getElementbyID(..) is null or not an object

Question

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

var rows = document.getElementById("mstrTable").getElementsByTagName("tr");

Here's the complete code:

    <html>
<head>
    <title>Scrolling Data Grid</title>
<style>
/* ==================================================================== */
/* 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 <table> 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; }
</style>


<script type="text/javascript">
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 += '<table id="mstrTable" style="table-layout: fixed; font-family: arial; font-size: 9pt;" cellpadding="0" cellspacing="0">\n'
html += '<thead>\n'
html += '<tr>\n'
html += '<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);">#</th>\n'
html += '<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);">' + rs.fields(0).name + '</th>\n'
html += '<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);">' + rs.fields(1).name + '</th>\n'
html += '<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);">' + rs.fields(2).name + '</th>\n'
html += '<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);">' + rs.fields(3).name + '</th>\n'
html += '<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);">' + rs.fields(4).name + '</th>\n'
html += '<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);">' + rs.fields(5).name + '</th>\n'
html += '<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);">' + rs.fields(6).name + '</th>\n'
html += '<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);">' + rs.fields(7).name + '</th>\n'
html += '<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);">' + rs.fields(8).name + '</th>\n'
html += '<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);">' + rs.fields(9).name + '</th>\n'
html += '<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);">' + rs.fields(10).name + '</th>\n'
html += '<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);">' + rs.fields(11).name + '</th>\n'
html += '<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);">' + rs.fields(12).name + '</th>\n'
html += '<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);">' + rs.fields(13).name + '</th>\n'
html += '<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);">' + rs.fields(14).name + '</th>\n'
html += '<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);">' + rs.fields(15).name + '</th>\n'
html += '</tr>\n'
html += '</thead>\n'

rs.MoveFirst
var i = 0
html += '<tbody>\n'
while (!rs.eof) {
++i
    html    +=  '<tr style="color: rgb(102,102,102)">\n'
    html    +=  '<td class="locked" style="height: 20px; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);">'+i+'.</td>\n'
    for (var r = 0; r < rs.fields.count; ++r) {
    if (!rs.fields(r).value) { rs.fields(r).value = "&nbsp;" }
    html    +=  '<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;">'+rs.fields(r).value+'</td>\n'
    }//end of for
    html    +=  '</tr>\n'
    rs.MoveNext 
    }//end of while
html += '</tbody>\n'
html += '</table>\n'
document.getElementById("p1").innerHTML = html
}
</script>
</head>

<body>

<div id="p1" class="scrollingdatagrid" style="width:800px;height:200px;border:1px solid rgb(128,128,128);"></div>

<script type="text/javascript">
(function() {
var color = "#E1E0D7"
var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
var n = rows.length;
var bgcs = [];
for(var i=0; i<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 && o.tagName.toLowerCase()!="tr") o = o.parentNode;
for(var i=0; i<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<n; ++i) rows[i].addEventListener("click", changeColor, false);
else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
})();
</script>














</body>
</html>

EW. this is scary. directly calling a sql database file is never a good idea from a web client. — Daniel A. White, Jun 22 '12 at 13:22
can you post the code as it is received on the browser? (without server side logic) — Fabrizio Calderan loves trees, Jun 22 '12 at 13:22
Is it just me or is youre `getElementById()` executing in a block that doesn't wait for readyState... — canon, Jun 22 '12 at 13:23
Using CSS classes instead of huge inline style code will improve readability. — Marcel Korpel, Jun 22 '12 at 13:39

score 4 · Answer 1 · answered Jun 22 '12 at 13:25

4

It does not find your element, because it is created in the onload event, which is triggered when the whole document is loaded. That means it is created AFTER your faulty line of code is executed.

answered Jun 22 '12 at 13:25

Amberlamps

32,084
5
34
50

apsillers · Accepted Answer · 2012-06-22T13:35:08.403

You are calling write_it() in response to the page's load, which fires after the DOM has been fully built and all images and subframes have fully loaded. See the MDN window.onload doc page for more on when onload fires.

However, your getElementById call is firing immediately, as soon as your JavaScript execution evironment is set up, before the DOM is built. Since the write_it function creates the table you're trying to select onload, and it runs after your getElementById call, the table doesn't yet exist when you try to select it.

You should move all of your code into the write_it function so that none of it runs until after the DOM is built.

I tried that, but in the ouput I get: ' document.getElementById("p1").innerHTML = html } and then a blank div box? — Jason Kelly, Jun 22 '12 at 14:08

Javascript: document.getElementbyID(..) is null or not an object

2 Answers2