Using document.getElementById() inside object, works in JSFiddle, TypeError in actual. Why?

I have a code that works in JSFiddle but doesn't work when I save the HTML+JS locally and test it locally. I can't figure out what's wrong with the code. Here is my JSFiddle

http://jsfiddle.net/LLUAB/

And here is the actual code, not very long

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

Because in JSFiddle your script is placed inside window.onLoad event handler by default. While in your case getElementById() method is unable to find not yet loaded element.

Put all your script right before closing </body> tag and it will work:

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

It works in Fiddle because of onLoad option specified here. The problem is that when new Composer line is fired, there's no such element in the DOM yet. Wrap this line in DOMReady handler - or move its invokation to the end of <body> element.

It's because your dom is not ready yet

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

Working code here. http://jsfiddle.net/LLUAB/1/

来源：https://stackoverflow.com/questions/15572630/using-document-getelementbyid-inside-object-works-in-jsfiddle-typeerror-in-a

标签

javascript

html

jsfiddle