Forum Moderators: open
I'm trying to get a table to render, but it won't show up in IE or Firefox. I think i'm not doing something right with the getElementById. Here's my code:
<HTML><HEAD></HEAD>
<SCRIPT>
var shipData = new Array(
["Naboo N1 Starfighter","Naboo","RoE",11,"Secrets of Naboo"],
["Royal Starship","Naboo","RoE",76,"Secrets of Naboo"],
["Neimoidian Shuttle","Naboo","RoE",15,"Secrets of Naboo"],
["Trade Federation Battleship","Trade Federation","RoE",3170,"Secrets of Naboo"],
["Trade Federation Droid Control Ship","Trade Federation","RoE",3170,"Secrets of Naboo"],
["Trade Federation Droid Starfighter","Trade Federation","RoE",3.5,"Secrets of Naboo"],
["Trade Federation Freighter","Trade Federation","RoE",3170,"Secrets of Naboo"],
["Trade Federation Landing Craft","Trade Federation","RoE",370,"Secrets of Naboo"]
);
function drawTable(TableID) {
var output = new Array();
var i = 0;
output[i++] = "<table id='myTable1'><tbody id='myTbody'>";
for (var j = 0; j < shipData.length; j++) {
output[i++] = "<tr>";
output[i++] = "<td>" + shipData[j][0] + "</td>";
output[i++] = "<td>" + shipData[j][1] + "</td>";
output[i++] = "<td>" + shipData[j][2] + "</td>";
output[i++] = "<td>" + shipData[j][3] + "</td>";
output[i++] = "<td>" + shipData[j][4] + "</td></tr>";
}
output[i++] = "</tbody></table>";
document.getElementById("TableID").innerHTML = output.join("");
}
drawTable("shipTable");
</SCRIPT>
<BODY>
<p ID="shipTable"></p>
</BODY></HTML>
<BODY onload="drawTable('shipTable');">
<p id="shipTable"></p>
document.getElementById(TableID).innerHTML = output.join("");
hope it helps
However I'm still getting an error on the last line of the function 'document.getElementById(...)' is null or not an object. When I test this by adding alert(typeof TableID); as the last line of the function it returns a value of "string".
Can't figure out your problem. If the element can't be referenced, then surely the table wouldn't appear at all.
<edit XXXX>
Have you changed the id of the table (and string in the call) to lower case, as johnl suggested?
</edit>
I mean, have you changed the id attribute to lower case: id="shipTable"
At the point in the code where you call drawTable('shipTable'), the element with the that id doesn't yet exist.
You need to
a) Put the call in an onload function:
window.onload = function() { drawTable('shipTable');}
or b) Place the call in a separate script block below the element that is referenced (for more immediate effect).
With John's help and yours I not only solved my issue but I gained considerable understanding of the situation. Thank you both!
