Question

我对this Fiddle和Visual Studio 2012产生的不同结果感到有些困惑。从小提琴中可以看出，输出显示“Ninja”和“Forever！”。但是，我不应该看到“力量！”作为输出的一部分？

以下是VS代码段的全部内容：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Suite</title>
    <script type="text/script">
        function assert(value, desc) {
            var li = document.createElement("li");
            li.className = value ? "pass" : "fail";
            li.appendChild(document.createTextNode(desc));
            document.getElementById("results").appendChild(li);
        }
        window.onload = function() { assert(true, 'power!'); };

        var ninja = {
            shout: function() {
                assert(true, 'Ninja');
            }
        };
        ninja.shout();

        setTimeout(
            function() { assert(true, 'Forever!'); },
            500);
    </script>
    <style>
        #results li.pass {
            color: green;
        }
        #results li.fail {
            color: red;
        }
    </style>
</head>
<body>
    <ul id="results"></ul>
</body>
</html>

当我运行上面的代码时，我只看到“力量！”正在打印，但后来我遇到了以下错误：

无法获取未定义或空引用的属性'appendChild

错误指向assert函数的最后一行。现在，我知道错误意味着什么。我只是不明白为什么会抛出错误。

据我所知，我正在处理两组语义相同的代码。还是我？我想弄明白1）为什么我看不到“力量！”输入我的小提琴，2）为什么我的VS代码产生不同的结果，3）为什么两个结果在相同的代码上有所不同。

Answer 1

Bu默认JSFiddle在onload事件处理程序...

中包装JavaScript

JSFiddle screenshot

...您的代码还设置了onload处理程序：

window.onload = function() { assert(true, 'power!'); };

...但文档只加载一次。当您分配该处理程序时，该事件已经过了。

然后反过来是没有JSFiddle运行的问题。

ninja.shout();不在加载事件处理程序中，并且出现在<ul id="results"></ul>之前，因此它会在DOM中存在结果元素之前尝试document.getElementById("results").appendChild(li);。

相同的代码，不同的结果在Fiddle与VS

1 个答案: