By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,238 Members | 1,659 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,238 IT Pros & Developers. It's quick & easy.

document.getElementById returning null...

P: 4
Hey guys...

I am not too knowledged in js and I code in it occasionally, so please excuse the question if it is steight forward...

Now...

Been working on an analogue clock script, customised it exactly to my needs, until I got to the point of calling it in my body...

I am trying to enter the clock inside a div but when I call it by document.getElementById nothing happens. Console on firefox says that it returns null. Initially I thought the error was inside the script, so to test it I called the clock by document.write(). But then it worked fine! It is not what I need it but it shows that the script works (right?)...

Please give me your advise on this as well as any other comments on the script...

I have combined js, styles and html in one file here:

http://homepage.mac.com/p_koumoundouros/.public/analogClock.html

Thank you in advance!
_____________________________________
Jul 30 '09 #1
Share this Question
Share on Google+
9 Replies


gits
Expert Mod 5K+
P: 5,390
you call:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById('theClock').innerHTML=clock;
instantly when the page is loaded ... and not when the document is ready ... so the dom cannot be used at this time. just add the innerHTML in the onload -event, for example like this:

wrap the line above in a function:

Expand|Select|Wrap|Line Numbers
  1. function initClock() {
  2.     document.getElementById('theClock').innerHTML=clock;
  3. }
then call:

Expand|Select|Wrap|Line Numbers
  1. <body onLoad="initClock(); displayClock();">
kind regards

PS: that is just a hack to fix it ... try to improve that code / flow of instructions :)
Jul 31 '09 #2

P: 4
Or a combination maybe?

Expand|Select|Wrap|Line Numbers
  1. function initClock() {
  2.    document.getElementById('theClock').innerHTML=clock;
  3.    displayClock();
  4. }
...and then only call the initClock in the body?

You are a star, hack || (!hack) it fixed the problem! I would appreciate a link to those instructions...

Thanks again!
Jul 31 '09 #3

gits
Expert Mod 5K+
P: 5,390
with 'instruction' i meant the lines of code you write down ;) ... so there is no link. the basics for the solution of such problems are to know, that the document's DOM is ready to use when everything is loaded, parsed and built in memory of the browser ... and so a document's dom is reliably ready to use in the document's body's onload-handler, so when you use DOM-methods like getElementById() you need a readymade DOM-tree of the document ... which we have with our current solutions above :)

kind regards
Aug 1 '09 #4

P: 4
It all makes sense now....
Aug 1 '09 #5

gits
Expert Mod 5K+
P: 5,390
:) ... i hope so ... just post back to the forum, anytime you have more questions ...

kind regards
Aug 2 '09 #6

P: 4
One more question has arrised:

Let's say I've got a small function like this:

Expand|Select|Wrap|Line Numbers
  1. function hideThis(id) {
  2.     var id=document.getElementById(id);
  3.     id.style.visibility='hidden'; }
to hide a <div>.

Is there some way when I call the function to be able to use more parameters, i.e make more than one <div>s to hide (all with one function)? What makes it difficult for me is that I am trying to do that for an undefined number of ids, i.e at some point I might call the function like "hideThis(id1,id2,id3)" and at some other point "hideThis(id4,id5)" (use a different number of parameters).

Thank you in advance!
Aug 7 '09 #7

gits
Expert Mod 5K+
P: 5,390
of course ... just pass an array or object ... i show you an example with an array:

Expand|Select|Wrap|Line Numbers
  1. var l = ['id1', 'id2', 'id3'];
  2.  
  3. function hideSomething(list) {
  4.     for (var i = 0, l = list.length; i < l; ++i) {
  5.         var itemId = list[i];
  6.         document.getElementById(itemId).style.visibility = 'hidden';
  7.     }
  8. }
  9.  
  10. hideSomething(l);
  11.  
kind regards
Aug 7 '09 #8

Dormilich
Expert Mod 5K+
P: 8,639
@ipanos
just a note: you might run into problems when you use a local variable with the same name as your parameter.
Aug 8 '09 #9

gits
Expert Mod 5K+
P: 5,390
that's true :) ... i overlooked that ... when you put javascript in mozilla in strict mode the error console will give you a warning like:

'local variable hides argument ...'

or similar ... since you redeclare a variable that you already use as a parameter.

kind regards
Aug 8 '09 #10

Post your reply

Sign in to post your reply or Sign up for a free account.