0

I'm building an application using KineticJS and with its latest update one of my text elements broke. The script that refers to it is in a onLoad handler and it's returning null. This is especially bizarre because when I run:

<div id="chatarea">
      <textarea id="chatBox"></textarea>
      <input type="text" id="chatInput">
</div>
<script>
    console.debug(document.getElementById('chatarea'));
</script>

It doesn't return null. But when I call that same debug function in my script.js on the load handler it returns null, and in the console this happens AFTER the one above! So it can't be that the script is running before the chatarea exists. I've read the KineticJS changelog and documentation and I haven't found anything to help me. If anyone could shed some light on this I would greatly appreciate it. I can't use an earlier version because Google Chrome's May 30 update broke some functionality in it. 

<head>
    <script src="scripts/kinetic.js"></script>
    <script src="scripts/screen.game.js"></script>
</head>
MasterRoro
  • 203
  • 3
  • 13
  • 2
    `getElementById()` is a method of `document`, not `window`. – Teemu Jun 10 '13 at 04:23
  • Please read: "[Why does jQuery or a DOM method such as `getElementById` not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element)" – David says reinstate Monica Jun 10 '13 at 04:28

1 Answers1

2

You must be getting error in your console and i think you need to use document.getElementById as it is a method of the document not of the global window scope.

 console.debug(document.getElementById('chatarea'));
PSL
  • 120,386
  • 19
  • 245
  • 237
  • I'm sorry. Actually I had written document.getElementById("...") in my .js file. When I wrote it over here I forgot to add it in. – MasterRoro Jun 10 '13 at 04:25
  • @MasterRoro place a debugger before this line and see what is happening. It works in the fiddle. http://jsfiddle.net/52C4k/ – PSL Jun 10 '13 at 04:27
  • I beg your pardon. What do you mean by place a debugger? Place a debug statement, you mean? With debug statements I made sure the text area exists until it's referred to in the .js file. There it no longer exists. And I made absolutely no changes other than updating KineticJS. – MasterRoro Jun 10 '13 at 04:45
  • Worth reading this https://developers.google.com/chrome-developer-tools/docs/javascript-debugging – PSL Jun 10 '13 at 04:47
  • @MasterRoro Also try this once `window.onload=function(){console.debug(document.getElementById('chatarea'));}` – PSL Jun 10 '13 at 04:49
  • Just tried that. I'm getting in the output like I should be. That strange. So I'm thinking maybe in the existing onload handler some part of KineticJS is overriding my elements somehow. Also I'm checking out that link. Thanks! – MasterRoro Jun 10 '13 at 04:57
  • Yup your script got executed before the DOM was ready so windows.onload fixed it. – PSL Jun 10 '13 at 04:58