Question

我有一个在JSFiddle中工作的代码，但是当我在本地保存HTML + JS并在本地测试它时，它不起作用。我无法弄清楚代码有什么问题。这是我的JSFiddle

这是实际的代码，不是很长

<!doctype html>
<html>
<head>
<script type="text/javascript" language="Javascript">
function Composer(foobox) {
    this.foobox = document.getElementById(foobox);

    this.foobox.onkeydown = function(){window.alert("hello")};
}

var myComposer = new Composer("foo");
</script>
</head>
<body>

<textarea id="foo"></textarea>

</body>
</html>

Answer 1

因为在JSFiddle中，默认情况下您的脚本放在window.onLoad事件处理程序中。在您的情况下getElementById()方法无法找到尚未加载的元素。

在关闭</body>标记之前将所有脚本放好，它将起作用：

<script type="text/javascript">
    // ...
</script>
</body>

Answer 2

由于此处指定的onLoad选项，它在Fiddle中有效。问题是当new Composer行被触发时，DOM中还没有这样的元素。在DOMReady处理程序中包装此行 - 或将其invokation移动到<body>元素的末尾。

Answer 3

这是因为你的dom尚未准备好

function Composer(foobox) {
    this.foobox = document.getElementById(foobox);
    alert(this.foobox); --Prints null
    this.foobox.onkeydown = function(){window.alert("hello")};
}

这里的工作代码。 http://jsfiddle.net/LLUAB/1/

在对象内部使用document.getElementById（），在JSFiddle中工作，实际上是TypeError。为什么？

3 个答案: