471,872 Members | 1,031 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,872 software developers and data experts.

document.getElementById returning null...

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
9 14103
gits
5,390 Expert Mod 4TB
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
ipanos
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
5,390 Expert Mod 4TB
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
ipanos
4
It all makes sense now....
Aug 1 '09 #5
gits
5,390 Expert Mod 4TB
:) ... i hope so ... just post back to the forum, anytime you have more questions ...

kind regards
Aug 2 '09 #6
ipanos
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
5,390 Expert Mod 4TB
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
8,658 Expert Mod 8TB
@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
5,390 Expert Mod 4TB
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.

Similar topics

4 posts views Thread by Rob | last post: by
NeoPa
reply views Thread by NeoPa | last post: by
reply views Thread by YellowAndGreen | last post: by
aboka
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.