JavaScript Code works in jsfiddle but not in .hta file: getElementById returns undefined

Question

I'm currently writing a little (html&javascript-)application in a .hta file, but somehow document.getElementById seems to return nothing (undefined) while executed in the .hta application, but when pasted in jsfiddle, the code works fine.

<!DOCTYPE html>
<html>
<head>
    <script>
    ... 
    (function (){loadDataFromFile();})();   
    function loadDataFromFile(){        
        ...     
        try {
            ...
            for(var i = 0; i < tmpReqs.length; i++){
                ...
                addHTMLReq(i);
            }
        }catch(Err){
            alert("File content contains errors.\n"+Err.message);
        }
    }

    function addHTMLReq(reqID){
        var req = reqs[reqID];
        if(!req) return;
        var contentElement = document.getElementById("main_table");
        alert(contentElement.innerHTML); //To debug, already fails here.
        var tr = document.createElement("tr");
        tr.id = req.id;
        var td_0 = document.createElement("td");
        td_0.id = "date";
        td_0.innerHTML = req.day + "/" + req.month + "/" + req.year;
        tr.appendChild(td_0);
        var td_1 = document.createElement("td");
        td_1.id = "source";
        td_1.innerHTML = reqSources[req.source];
        tr.appendChild(td_1);
        var td_2 = document.createElement("td");
        td_2.id = "requirement";
        td_2.innerHTML = req.requirement;
        tr.appendChild(td_2);

        contentElement.appendChild(tr);
    }
    </script>
</head>
<body>
    <div id="category_definition">
        <category id="cat0" name="My Category 1" topCat="none" />
    </div>

    <div id="content">
        <div id="categories">

        </div>
        <table id="main_table">
            <tr>
                <th id="date">Date</th>
                <th id="source">Source</th>
                <th id="requirement">Description</th>
            </tr>
            <tr id="100">
                <td id="date">28/01/2015</td>
                <td id="source">src</td>
                <td id="requirement">Lorem Ipsum dolores est</td>
            </tr>
        </table>
    </div>
</body>
</html>

I omitted the useless part of the code. All variables used ARE properly defined, the only problem lies in the document.getElementById, createElement, etc methods.

Does anyone know what the problem could be?

You try to eat the pizza before you make it. The element is not created when you try to reference it. Either add the script after the HTML in the body or load it on document ready. — epascarello, Feb 10 '15 at 21:06

score 3 · Answer 1 · answered Feb 10 '15 at 21:09

3

Your javascript is firing before the DOM is loaded, so when it looks for document.getElementById("main_table");, it returns undefined.

Instead, move your javascript below your page, before you close the body tag, like so:

<html>
    <body>
        <div id="main_table"></div>
        <script>doStuffHere()</script>
    </body>
</html>

answered Feb 10 '15 at 21:09

ndugger

7,373
5
31
42

Just as a sidenote to your comments to Eclecticist's answer: This is a _HTA_ question, and `attachEvent` would work fine in the used document mode (IE7), even when running HTA with IE11. – Teemu Feb 10 '15 at 22:20

score 2 · Accepted Answer · answered Feb 10 '15 at 21:08

2

In cooking terms: You are trying to eat the pizza before you make it.

The element is not created when you try to reference it. Either add the script after the HTML in the body or load it on document ready or on window load.

answered Feb 10 '15 at 21:08

epascarello

204,599
20
195
236

Thanks for the answer! (And also, it would be nice if the downvotes could be explained... How can I post better questions if I don't know what I did wrong on the first ones...) – Fly Feb 10 '15 at 21:24

JavaScript Code works in jsfiddle but not in .hta file: getElementById returns undefined

2 Answers2