www.webdeveloper.com
Results 1 to 6 of 6

Thread: document.getElementById() problem in Firefox

  1. #1
    Join Date
    Feb 2011
    Posts
    3

    document.getElementById() problem in Firefox

    Hi,

    In a .php file containing other HTML, I use PHP code to build a string of HTML prior to the <head> tag of the page, of which contains a hidden input field as such:

    PHP Code:
    $htmlQuestionForm .= '<input id="NUM_QS" type="hidden" value='.$qNum.' />'
    Eventually I echo this string in the <body> of the page:
    PHP Code:
    echo $htmlQuestionForm
    In that same .php file, I load an external javascript file in the <head> tag as such:

    Code:
    <script type="text/javascript" src="../js/devoPages.js"></script>
    At the start of this external javascript file, devoPages.js, is a global variable defined:

    Code:
    var NUM_QS = document.getElementById("NUM_QS").value;
    In Chrome and IE, NUM_QS takes on the value as per the hidden input field in the .php file mentioned above.

    In Firefox however, I get an error:

    Code:
    Error: document.getElementById("NUM_QS") is null
    Source File: http://localhost/metro/js/devoPages.js Line: 2
    Can you please tell me where the error is here?

    Thank you.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by icekube12jr View Post
    Hi,

    In a .php file containing other HTML, I use PHP code to build a string of HTML prior to the <head> tag of the page, of which contains a hidden input field as such:
    ...
    Can you please tell me where the error is here?

    Thank you.
    For starters there shouldn't be any input elements, hidden or otherwise, prior to the <head> tag. They should all be in the <body>

  3. #3
    Join Date
    Feb 2011
    Posts
    3
    Thanks for the reply. The <input> tag isn't actually above the <head> tag, it is merely built in a php string there. To clarify a little, this is sort of what the .php file looks like:

    PHP Code:
    <?php
    ...
    $htmlQuestionForm .= '<input id="NUM_QS" type="hidden" value='.$qNum.' />'
    ...
    ?>

    <html>
    <head>
    <script type="text/javascript" src="../js/devoPages.js"></script>
    </head>
    <body>
    ...
    <?php echo $htmlQuestionForm?>
    ...
    </body>
    </html>

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    ok, things are a bit clearer now.

    Code:
     
    var NUM_QS = document.getElementById("NUM_QS").value;
    is being executed in the <head> and so the element with id = NUM_QS doesn't exist yet and so you are getting the error message. You can't access elements until they have been loaded in the <body>

    Either put that statement in a window.onload which means it won't be executed until the window and all its elements have been loaded or link to your external js just above the </body> at which point all the elements should have been loaded by then.

  5. #5
    Join Date
    Feb 2011
    Posts
    3

    Thumbs up

    I put the <script> tag just before the </body> tag and it worked.

    Thank you very much... and I like the Bible reference in your signature . Jesus is awesome.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by icekube12jr View Post
    and I like the Bible reference in your signature
    Do you mean that "Let he who is without sin cast the first stone."? I like very much this one, too: "Let he who is without sin cast the cosin."

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles