Javascript问题已解决，不明白问题是什么答案

【问题标题】：Javascript problem solved, don't understand what the problem wasJavascript问题已解决，不明白问题是什么
【发布时间】：2010-11-23 01:33:49
【问题描述】：

在 HTML 头部部分：

<script type="text/javascript" src="Scripts/editScripts.js"></script>

就在</body> 标记上方（结束标记，html 页面的底部）。另外：这是旧代码，这是它不工作时的样子：

    <script type="text/javascript">if(document.getElementById)initialize();loadEvents();</script>
  </body>
</html>

在editScripts.js 文件中：

/*global document,addFileInput*/
function loadEvents() {
    var a = document.getElementById('addField');
    a.onclick = addFileInput;
}
var upload_number = 2;
function addFileInput() {
    var d = document.createElement("div");
    var file = document.createElement("input");
    file.setAttribute("type", "file");
    file.setAttribute("name", "addFile[]");
    file.setAttribute("size", "35");
    file.setAttribute("class", "file");
    file.setAttribute("id", "addFile"+upload_number);
    d.appendChild(file);
    document.getElementById("moreUploads").appendChild(d);
    upload_number++;
}

这行不通。我用这个替换了页脚中的 javascript。
这是新代码，它可以按我的预期工作。：

<script type="text/javascript">if (document.getElementById)loadEvents();</script>

现在它确实起作用了……我不明白省略那个函数调用，即使它所指的函数不存在，也会把事情搞得这么大。

【问题讨论】：

标签： javascript html file upload input

【解决方案1】：

在不带括号的if 语句中，只有第一个语句是有条件的。它后面的每个语句都是无条件的，无论缩进如何。

因此，在第一个示例中，loadevents() 无条件执行。

【讨论】：

【解决方案2】：

浏览器在尝试调用“初始化”函数时会报告错误，因为没有这样的函数。因此，您调用“loadEvents”的下一行将不会运行。看这个例子：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>JS Error Test</title>
    </head>
    <body>
        <script type="text/javascript">
            if(document.getElementById) {
                initialize();
                alert("You shouldn't see me!");
            }
        </script>
    </body>
</html>

在那个例子中，警告框不应该出现，因为我没有声明一个“初始化”函数，浏览器会报告一个 JS 错误。但是，删除“初始化”功能会导致出现警告框。

这就是通过消除导致 Javascript 错误的原因来解决问题的方法。

【讨论】：

【解决方案3】：

可能是因为您没有在文档加载事件中调用脚本。所以当你在 before 你的 dom 完全加载的标题中调用你的脚本时，它都不起作用，但是现在当你在 dom 加载之后调用它时，它起作用了。

解决所有这些问题的正确方法应该是在文档完全加载后调用您的脚本，或者至少从正文 onload 事件中调用：

<body onload="initScripts()">

然后在 initScripts 函数中添加您希望在页面加载时运行的所有脚本。

此外，还有更好的方法可以做到这一点，例如使用 jquery，和/或阅读以下内容：http://onlinetools.org/articles/unobtrusivejavascript/chapter4.html

【讨论】：

等一下，新旧javascript都放在了html的底部。不同之处在于我遗漏了 1 个函数调用。

【解决方案4】：

你说：“我不明白忽略那个函数调用，即使它所指的函数不存在，也会把事情搞得这么大。”这与您问题的其余部分不一致，这意味着添加调用会搞砸。但我认为我引用的文字是正确的描述。

这是真正的答案。旧代码：

if(document.getElementById)loadEvents();

如果未定义 getElementsById，则不会调用 loadEvents。它不是在所有浏览器中都定义的。

相反，新代码不仅省略了函数调用：语义也发生了变化。

if(document.getElementById)initialize();loadEvents();

总是调用 loadEvents，所以你想要发生的事情总是会发生。

【讨论】：

其实你换新旧了。
如果我猜错了问题含糊不清的解决方法（即实际上是添加一个函数调用，它把事情搞得一团糟，而不是像现在的问题所说的那样遗漏一个），那么我不知道为什么新代码有效而旧代码无效。
有人过来解释了。我将其标记为正确答案。如果您仍然感兴趣，请阅读。