document.getElementById() problem in Firefox

**icekube12jr** · 02-12-2011 04:23 AM

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.

**tirna** · 02-12-2011 05:55 AM

Originally Posted by icekube12jr

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>

**icekube12jr** · 02-12-2011 10:57 PM

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>

**tirna** · 02-12-2011 11:19 PM

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.

**icekube12jr** · 02-12-2011 11:51 PM

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.

**Kor** · 02-14-2011 08:00 AM

Originally Posted by icekube12jr

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: document.getElementById() problem in Firefox

Thread Tools

Display

document.getElementById() problem in Firefox

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions