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

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>

score 6 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

这是因为你的 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/

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

3 回答 3

Related

Reference