0

I am trying to add a header to a html table with a javascript function. The entire script is rather large so I've just included the html snippet where the html table is created and then the function that is supposed to add a header to that table. (when a button is clicked this function will be called). However I get the following error:

Locations.html:703 Uncaught TypeError: Cannot read property 'createTHead' of null

Line 703 corresponds with the "var hdr = tbs.createTHead();" line of code. It seems as though the function cannot find the "myTable" table and is returning a null when it runs the getelement by id line (i think)..but I am not sure why? Why would it not be able find this table element?

<div class="statsContainer">
    <div class="mainCont" id="mainCont"></div>
    <div class="statsLoc" id="statsLoc">
        <table class="myTable" id="myTable"></table>
    </div>
    <div class="listLoc" id="listLoc"></div>
</div>

function locClick(strLN) {  
    RegionName.innerText = strLN;       
    var qry = "select Latitude, Longitude, Description from locations where Location_ID in (select Location_ID from locations where Location_Name = '" + strLN + "')";      
    clearDiv("mainCont");
    clearDiv("statsLoc");
    clearDiv("listLoc");        
    phpRequest(qry, "getDataFromPhp", processPHP, 1);       
    addTableHead("myTable", "help");        
}               

function addTableHead(tbName, txtHead) {
    var tbs = document.getElementById("myTable");
    var hdr = tbs.createTHead();
    var rw = hdr.insertRow(0);
    var cell = rw.insertCell(0);
    cell.innerHTML = txtHead;}
Jon
  • 35
  • 1
  • 9
  • Sorry I forgot to include the closing curly bracket on the function - but it is there is my code. – Jon May 26 '17 at 19:51
  • Just edit your question to correct that. And, take out all the extra line feeds as well. – Scott Marcus May 26 '17 at 19:52
  • 1
    The error is pretty self-explanatory. `cannot read property THead of null`. So, we look at your code for where you are accessing `THead` and look at the object you are calling it on because that is the object that is `null`. That object is `tbs`. If we then look at where `tbs` comes from, we find that on the line above it. That line looks good (since you do have your table with an `id` of `myTable`). That leads us to question "when" your code is executing. If the `addTableHead` function is running before the HTML is finished parsing, it would explain this error. – Scott Marcus May 26 '17 at 19:58
  • Can you show how addTableHead() function is loaded and called? – Erik Hermansen May 26 '17 at 19:59
  • Hi all, thanks for the comments I have a button that is clicked. When the button is clicked it calls this function which then calls the addTableHead function: – Jon May 26 '17 at 20:53
  • I've added the function that calls the addTableHead function to the code above. Just by the way I am very new to html and javascript so forgive me if I seem a bit slow to understand. – Jon May 26 '17 at 21:06
  • It would seem strange to me that the table is not created before the function is run. I am able to add elements to the statsloc div (the div containing my table) from the same button click, so surely that means that the html would have parsed already by the time I've clicked that button and called that function? – Jon May 26 '17 at 21:09
  • Oh wait, I can see now what's wrong - my cleardiv function will be removing the table from the div prior to me running the addTableHead function. Thanks for all the help guys, I'll go have a look at that. Sorry to waste your guys time. As I said I'm still learning – Jon May 26 '17 at 21:12

1 Answers1

0

The only reason I can see for getElementById() returning NULL is cause "myTable" doesnt exist in the DOM when the function is called.

Are you calling the function "manually" while testing?

You could use DOMContentLoaded event for calling functions that accesses the DOM:

document.addEventListener('DOMContentLoaded', function() {
// Put JavaScript in here
});
Scott Marcus
  • 57,085
  • 6
  • 34
  • 54
Thomas Wikman
  • 587
  • 2
  • 8
  • You could be right, but we don't have enough information to know that and therefore you can't really say that this is the problem. This should be a comment, not an answer. – Scott Marcus May 26 '17 at 20:01
  • 1
    We do know that the id "myTable" exists, as in HTML. Therefor the only reason for NULL being returned is cause the id doesnt exist when the call is made. – Thomas Wikman May 26 '17 at 20:04
  • That's not true. Since the OP is not sharing all of the code, we can't know what the "only" reason is. I'm just trying to help you understand that a good answer is one that is informed by the question. Since this question doesn't share all the information (we can't even replicate it), your thoughts would be better conveyed as a comment. – Scott Marcus May 26 '17 at 20:08
  • Basic knowledge of JavaScript and the DOM would let you come to the same conclusion as me. He left all the information needed to ANSWER him. – Thomas Wikman May 26 '17 at 20:15
  • You can be argumentative all you like. I'm trying to help you be successful here at Stack Overflow. Answers that are inferred (especially ones that ask a question in the answer, like yours) are best provided as comments. I am truly sorry if you can't understand that is how the site works. – Scott Marcus May 26 '17 at 20:22
  • I do see the point you are trying to make (thanks, you're very kind). I just think that you are wrong about that "we don't have enough information". – Thomas Wikman May 26 '17 at 20:31
  • Well, you did ask *"Are you calling the function "manually" while testing?"*, so you, yourself wanted more information. Usually, an "answer" like this will get down voted - - even if it turns out to be correct. That didn't happen to you because you are new to Stack Overflow. – Scott Marcus May 26 '17 at 20:34
  • Hi guys - thanks for your time - please see above - I've managed to figure out what I was doing wrong. – Jon May 26 '17 at 21:13
  • You won Scott. ;) – Thomas Wikman May 26 '17 at 21:23