document.getElementById returning null...

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ipanos
    New Member
    • Jul 2009
    • 4
    #1

    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.getEle mentById 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.co m/p_koumoundouros/.public/analogClock.htm l

    Thank you in advance!
    _______________ _______________ _______
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      you call:

      Code:
      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:

      Code:
      function initClock() {
    document.getElementById('theClock').innerHTML=clock;
}
      then call:

      Code:
      <body onLoad="initClock(); displayClock();">
      kind regards

      PS: that is just a hack to fix it ... try to improve that code / flow of instructions :)

        Comment

        • ipanos
          New Member
          • Jul 2009
          • 4
          #3
          Or a combination maybe?

          Code:
          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!
          Last edited by Dormilich; Aug 1 '09, 09:04 AM. Reason: Please use [code] tags when posting code

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5390
              #4
              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

                Comment

                • ipanos
                  New Member
                  • Jul 2009
                  • 4
                  #5
                  It all makes sense now....

                    Comment

                    • gits
                      Recognized Expert Moderator Expert
                      • May 2007
                      • 5390
                      #6
                      :) ... i hope so ... just post back to the forum, anytime you have more questions ...

                      kind regards

                        Comment

                        • ipanos
                          New Member
                          • Jul 2009
                          • 4
                          #7
                          One more question has arrised:

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

                          Code:
                          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,i d2,id3)" and at some other point "hideThis(id4,i d5)" (use a different number of parameters).

                          Thank you in advance!
                          Last edited by gits; Aug 7 '09, 11:22 PM. Reason: added code tags

                            Comment

                            • gits
                              Recognized Expert Moderator Expert
                              • May 2007
                              • 5390
                              #8
                              of course ... just pass an array or object ... i show you an example with an array:

                              Code:
                              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

                                Comment

                                • Dormilich
                                  Recognized Expert Expert
                                  • Aug 2008
                                  • 8694
                                  #9
                                  Originally posted by ipanos
                                  Code:
                                  function hideThis(id) {
	var [B]id[/B]=document.getElementById([B]id[/B]);
	id.style.visibility='hidden'; }
                                  just a note: you might run into problems when you use a local variable with the same name as your parameter.

                                    Comment

                                    • gits
                                      Recognized Expert Moderator Expert
                                      • May 2007
                                      • 5390
                                      #10
                                      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

                                        Comment

                                        Previous template Next
                                        Working...