Converting firefox javascript to IE javascript

I've been trying to get some AJAX code that runs fine in FireFox to run in IE. I'm running into some trouble with updating some tables in the script though. I've seen numerous other people have similar issues, but none of the solutions they've found have worked for me. The problem occurs first on the line

qe3Table.innerHTML = 
    "<tr>\n" +
    "   <th>Name</th>\n" +
    "   <th>Status</th>\n" +
    "   <th>View Status</th>\n" +
    "</tr>\n";

Where I'm getting the error "'null' is null or not an object"

I'm pretty sure that all of my other errors are of the same type as this one, my AJAX script and some accompanying javascript is below.

<script type="text/javascript">
<!--
//obtains the box address for a QE3 on the system for the given index
function getQE3BoxAddressHash(index)
{
    var retVal = 0x00000100; //initial value for QE3 boxes
    retVal |= (index & 0x000000FF);
    return retVal;
}

//obtains the box address for a QED on the system for the given index
function getQEDBoxAddressHash(index)
{
    var retVal = 0x00001300; //initial value for QED boxes
    retVal |= ((index & 0x0000000F) << 4);
    retVal |= ((index & 0x000000F0) >> 4);
    return retVal;
}
-->
</script>
<script type="text/javascript">
<!--
var textSocket;
function fillTables()
{
    if(textSocket.readyState != 4)
        return;
    var qe3Table = document.getElementById("QE3_TABLE");
    var qedTable = document.getElementById("QED_TABLE");

    var rawData = textSocket.responseText.split("::::");

    var qe3Data = new Array();
    var qedData = new Array();

    var qe3Index = 0;
    var qedIndex = 0;


    for(var item in rawData)
    {
        if(rawData[item].indexOf("QA") != -1)
        {
            qe3Data[qe3Index++] = rawData[item];
        }
        else if(rawData[item].indexOf("QED") != -1)
        {
            qedData[qedIndex++] = rawData[item];
        }
    }


    qe3Table.innerHTML = 
    "<tr>\n" +
    "   <th>Name</th>\n" +
    "   <th>Status</th>\n" +
    "   <th>View Status</th>\n" +
    "</tr>\n";
    qedTable.innerHTML = 
    "<tr>\n" +
    "   <th>Name</th>\n" +
    "   <th>Status</th>\n" +
    "   <th>View Status</th>\n" +
    "</tr>\n";

    for(var value in qe3Data)
    {
        var components = qe3Data[value].split("-");
        if(components.length != 3)
            continue;
        qe3Table.innerHTML += 
        "<tr>\n" +
        "   <td>" + components[0] + "-" + components[1] +"</td>\n" +
        "   <td>" + 
        ((components[2].toUpperCase() === "ONLINE")? 
                "<font color=\"green\"><b>ONLINE</b></font>":
                "<font color=\"red\"><b>OFFLINE</b></font>")+
        "</td>\n" +
        "   <td>\n <input type=\"button\" oncl开发者_如何学Pythonick=\"window.location='system_status.php?boxAddress=" + getQE3BoxAddressHash(value).toString(16) + "'\" value='View Status for " + components[0] + "-" + components[1] +"'></input> </td>\n" +
        "</tr>\n";
    }
    for(var value in qedData)
    {
        var components = qedData[value].split("-");
        if(components.length != 3)
            continue;
        qedTable.innerHTML += 
        "<tr>\n" +
        "   <td>" + components[0] + "-" + components[1] +"</td>\n" +
        "   <td>" + 
        ((components[2].toUpperCase() === "ONLINE")? 
                "<font color=\"green\"><b>ONLINE</b></font>":
                "<font color=\"red\"><b>OFFLINE</b></font>")+
        "</td>\n" +
        "   <td>\n <input type=\"button\" onclick=\"window.location='system_status.php?boxAddress=" + getQEDBoxAddressHash(value).toString(16) + "'\" value='View Status for " + components[0] + "-" + components[1] +"'></input> </td>\n" +
        "</tr>\n";
    }
}

function initAjax()
{
    try
    {
        // Opera 8.0+, Firefox, Safari
        textSocket = new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer Browsers
        try
        {
            textSocket = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                textSocket = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                // Something went wrong
                alert("A browser error occurred.");
                return false;
            }
        }
    }

    textSocket.onreadystatechange=fillTables
}

function reloadTables()
{
    textSocket.open("GET","ajax_scripts/get_connected_boxes.php",true);
    textSocket.send(null);
}

function init()
{
    initAjax();
    reloadTables();
}

window.onload=init();
-->
</script>

The problem is probably with:

var qe3Table = document.getElementById("QE3_TABLE");

If you're running this script before the body is loaded, that won't exist. Check to see if that variable has anything in it.

I Tried both of your guys' fixes but they didn't seem to help. In the end, I converted all calls of the form:

qe3TableNew.innerHTML = ("<tr>\n" +"    <th>Name</th>\n" +" <th>Status</th>\n" +"   <th>View Status</th>\n" +"</tr>\n");

to

    var row;
    var cell;
    var text;
    var font;
    row = document.createElement("tr");
    qe3TableNew.appendChild(row);
    cell = document.createElement("th");
    row.appendChild(cell);
    text = document.createTextNode("Name");
    cell.appendChild(text);
    cell = document.createElement("th");
    row.appendChild(cell);
    text = document.createTextNode("Status");
    cell.appendChild(text);
    cell = document.createElement("th");
    row.appendChild(cell);
    text = document.createTextNode("View Status");
    cell.appendChild(text);

This seemed to solve it, so I believe it has to do with IE's inability to handle changes to innerHTML.

Thanks for the help guys.

At least one issue (which could produce the above symptoms) is the line:

window.onload=init();

Hint: the () operator executes the function immediately and evaluates to the return value. This in turn may allow the XHR handler (in certain situations) to fire at a time when the DOM may not be ready.

Happy coding.