clickListener not working in Explorer

[wdallman]

This clickListener works perfectly in Firefox, but not in Explorer. Any ideas as to why??  Note - using the core library for Core.addEventListener()

 

var numDriversLast = -1; // placeholder for the previous value of numDrivers

var driverForm =

{

    init: function() //when the form is loaded, this function runs

    {

        //assign name from html 'selDrivers' to variable 'drivers'

        var drivers = document.getElementById("selDrivers");

 

        //Use core library to add event listener

        Core.addEventListener(drivers, "change", driverForm.clickListener);

    },

    removeChildrenFromNode: function(node)

    {

while (node.hasChildNodes())

{

  x= node.removeChild(node.firstChild);

        //alert(x.nodeName);

}

    },

 

    clickListener: function() //the function that runs when the user clicks

    {

        //store the number of drivers selected into variable 'numDrivers''

        var numDrivers = document.getElementById("selDrivers").value;

        if(numDriversLast == -1){// if first time through...

            numDriversLast = numDrivers;

        }

        //remove elements in the table if currently printed to page

        //(if user already clicked a number of drivers, and is now doing it again)

        for(j=1; j <= numDriversLast; j++){

            driverTableId = "driverTable" + j;

            var tableToRemove = document.getElementById(driverTableId);

            // alert(tableToRemove.hasChildNodes() );

            driverForm.removeChildrenFromNode(tableToRemove);

        }

        //alert("NumDrivers" + numDrivers);

        //use for loop to display input fields within table

        for(i=1;i <= numDrivers; i++){

            id = "driverTable" + i;

            var tbl = document.getElementById(id);

            tbl.innerHTML="<thead id='thead'>Driver " + i + "</thead>\n\

                      <tr id='tr'>\n\

                        <td id='td'>First Name:</td>\n\

                        <td id='td'><input type='text' name='First Name " + i + "' class='required'/></td>\n\

                      </tr>\n\

                    ";

        }//end for loop

        numDriversLast = numDrivers;

    }//end clickListener()

};

 

Core.start(driverForm);

[wdallman]

I think the issue is with document.getElementById(). In FireFox, tbl will be [object HTMLTableElement] and with IE tbl will be [object].

 

var tbl = document.getElementById(id);

            alert(tbl);

            tbl.innerHTML="string";

[wdallman]

Solved it!

 

Apparently, IE does NOT allow .innerHTML when dealing with a table.  So, I simply changed them to divs with the correct ‘id’, and then put the table tags in the string that is to be printed when the clickListener is called.  Now it works!