JavaScript 代码在 jsfiddle 中有效,但在 .hta 文件中无效:getElementById returns 未定义

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

我目前正在 .hta 文件中编写一些 (html&javascript-) 应用程序,但不知何故 document.getElementById 似乎 return 什么都没有(未定义) 在 .hta 应用程序中执行,但在 jsfiddle 中粘贴时,代码工作正常。

<!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>

我省略了代码中无用的部分。使用的所有变量都已正确定义,唯一的问题在于 document.getElementById、createElement 等方法。

有人知道问题出在哪里吗?

用烹饪术语来说:你正在尝试在制作比萨饼之前吃掉它。

当您尝试引用该元素时,该元素未创建。在正文中的 HTML 之后添加脚本,或者在文档就绪或 window 加载时加载它。

您的 javascript 在 DOM 加载之前触发,因此当它查找 document.getElementById("main_table"); 时,它 returns 未定义。

而是将 javascript 移到页面下方,然后再关闭 body 标签,如下所示:

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