document.getElementById returning null...

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

Follow Post Reply

14103

gits

5,390

Expert Mod 4TB

you call:

Expand|Select|Wrap|Line Numbers

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

 function initClock() {

    document.getElementById('theClock').innerHTML=clock;

}

then call:

Expand|Select|Wrap|Line Numbers

<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

Or a combination maybe?

Expand|Select|Wrap|Line Numbers

 function initClock() {

   document.getElementById('theClock').innerHTML=clock;

   displayClock();

}

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

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

One more question has arrised:

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

Expand|Select|Wrap|Line Numbers

 function hideThis(id) {

    var id=document.getElementById(id);

    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

 
var l = ['id1', 'id2', 'id3'];
 
function hideSomething(list) {

    for (var i = 0, l = list.length; i < l; ++i) {

        var itemId = list[i];

        document.getElementById(itemId).style.visibility = 'hidden';

    }

}
 
hideSomething(l);

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

document.getElementById returning null...

Post your reply

Similar topics