473,225 Members | 1,209 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

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


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:


Thank you in advance!
Jul 30 '09 #1
9 14186
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
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
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
It all makes sense now....
Aug 1 '09 #5
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
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
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'];
  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. }
  10. hideSomething(l);
kind regards
Aug 7 '09 #8
8,658 Expert Mod 8TB
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
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

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

Similar topics

by: John Ramsden | last post by:
.... when the id 'junk' doesn't exist anywhere in the document, instead of returning 'object'?! I am using Javascript for a drop-down menu, slightly adapted from one by Angus Turnbull (see...
by: lawrence | last post by:
Sorry for the dumb question but I'm new to Javascript. I wrote this script hoping to animate some div blocks on a page. You can see the page here: http://www.keymedia.biz/demo.htm Can anyone...
by: drdeath89 | last post by:
Im writing some Javascript code that requires me to loop all child nodes and sub child nodes of a certain parent node and execute a function with the child node in question. I decided to write a...
by: Rob | last post by:
Hi, I have a label that I'm trying to make invisible on the client side using the OnClientClick event for a button. In the javascript function I have the following code: var x =...
by: yogarajan | last post by:
hi i have create one aspx file with masterpage. i have using javascript code so in javascript code contains document.gelelementbyid but it gives error (document.getelementbyid is null or...
by: ananjy | last post by:
Hi when i m trying to execute my ajax code using a link to display datas from another page named second.php., i got an error when the page loads in "ie"., which runs perfectly in firefox., here...
by: phpmel | last post by:
hi guys, here is my problem. i have a js function called changemsg that takes a label in an aspx page and sets its text to blank. <script type="text/javascript" > function...
by: Nick | last post by:
I've seen a few frameworks use the following: function $(id) { return document.getElementById(id); } Then to use: $('something').innerHTML = 'blah'; I'm just trying to roll this out to my...
by: vegetable21 | last post by:
Hi, I'm relatively new to JavaScript, but not to programming. I'm trying to get a table to expand and collapse within a cell of my master table. However i want to collapse all the other open...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.