getElementById returns null

[addy]

I am writing a gallery page where I am trying to load images in two
columns
of a table. I am able to get 1 row via getElementById but the second
one
returns a null which fails my other function which is responsible to
display
images in the table

Would appreciate if you could help me out.

following is the code for HTML

<!-- HTML code--->
<table border="0" width="98%" height="65%" id="content">
<tr><td colspan="3"> </td></tr>
<tr>
<td width="10%" id="spacer"> </td>
<td width="30%" valign="top" id="galrow" >
<script type="text/javascript">
CreateResidentialGallery();
</script>
</td>
<td width="50%" id="display">

</td>
</tr>
</table>
<!--- End HTML code -->

// Javascript code


function CreateResidentialGallery()
{
var arFileNames = new Array();
var arThumbObjects = new Array();
var arFullObjects = new Array();

arFileNames =[ 'images/img000002.jpg',
'images/img000003.jpg',
'images/img000011.jpg',
'images/img000014.jpg',
'images/img000017.jpg',
'images/IMG_0253.JPG',
'images/IMG_0254.JPG',
'images/IMG_0256.JPG',
'images/IMG_0258.jpg',
'images/IMG_0259.jpg',
'images/IMG_0260.jpg',
'images/IMG_0264.jpg',
'images/IMG_3754.JPG'
] ;


for(var i=0; i<arFileNames.length; i++)
{
var oImg = document.createElement("img");
oImg.src=arFileNames;
oImg.height=100;
oImg.width=100;
oImg.border=5;

arThumbObjects = oImg;
}

for(var i=0; i< arFileNames.length; i++)
{
var oImg = document.createElement("img");
oImg.src = arFileNames;
oImg.height=200;
oImg.width =250;
arFullObjects= oImg;
}


var oThumbParent = document.getElementById("galrow");
var oFullParent = document.getElementById("display"); <=== returns
null

LoadGallery(arThumbObjects,oThumbParent,arFullObjects,oFullParent);
}
//End Code javascript

 

[sasuke]

<!-- HTML code--->
<table border="0" width="98%" height="65%" id="content">
<tr><td colspan="3"> </td></tr>
<tr>
<td width="10%" id="spacer"> </td>
<td width="30%" valign="top" id="galrow" >
<script type="text/javascript">
CreateResidentialGallery();
</script>
</td>
<td width="50%" id="display">

</td>
</tr>
</table>

[snip]

function CreateResidentialGallery()
{
var arFileNames = new Array();
arFileNames =[ 'images/img000002.jpg',
'images/img000003.jpg',
'images/img000011.jpg',
'images/img000014.jpg',
'images/img000017.jpg',
'images/IMG_0253.JPG',
'images/IMG_0254.JPG',
'images/IMG_0256.JPG',
'images/IMG_0258.jpg',
'images/IMG_0259.jpg',
'images/IMG_0260.jpg',
'images/IMG_0264.jpg',
'images/IMG_3754.JPG'
] ;

Or simply:
var imgArr = ['img1.jpg', 'img2.jpg'];

[snip]
var oFullParent = document.getElementById("display"); <=== returns null

This is because your SCRIPT executes before the entire document has
loaded i.e. simply put, there is no TD which goes by the ID of
`display' when `CreateResidentialGallery()' function executes.

You can either attach a handler to be executed when the entire
document loads [the `onload' attribute of the body tag or the `onload'
property of the window object] or move the SCRIPT tag to the bottom of
your markup.

HTH.

 

[Jorge]

<!-- HTML code--->
<table border="0" width="98%" height="65%" id="content">
<tr><td colspan="3"> </td></tr>
<tr>
<td width="10%" id="spacer"> </td>
<td width="30%" valign="top" id="galrow" >
************* <script type="text/javascript"> ********
************* CreateResidentialGallery(); ************
************* </script> ******************************
</td>
<td width="50%" id="display">

</td>
</tr>
</table>

<!-- HTML code--->

<table border="0" width="98%" height="65%" id="content">
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td width="10%" id="spacer"></td>
<td width="30%" valign="top" id="galrow"></td>
<td width="50%" id="display"></td>
</tr>
</table>

<script type="text/javascript">
CreateResidentialGallery();
</script>

<!--- End HTML code -->

 

[Martin Rinehart]

Two suggestions:

1) var foo = []; // better than new Array(); (see Crockford's book)

2) Putting the thumbnails into a single graphic and using an image map
could speed up your page load time. (see Souder's book)

 

[Thomas 'PointedEars' Lahn]

I am writing a gallery page where I am trying to load images in two
columns
of a table. I am able to get 1 row via getElementById but the second
one
returns a null which fails my other function which is responsible to
display
images in the table

[...]
<td width="30%" valign="top" id="galrow" >
<script type="text/javascript">
CreateResidentialGallery();
</script>
</td>
<td width="50%" id="display">
[...]
</td>
[...]
function CreateResidentialGallery()
{
[...]
var oFullParent = document.getElementById("display"); <=== returns
null

You try to access the element object before it becomes part of the DOM tree.
Use <body onload="createResidentalGallery()"> instead.

Don't mix Array() and Array initializers (`[...]'). Make arrays of objects
instead of several arrays; that makes reuse and maintenance easier.

Avoid repeated property access (especially in for-loops); it slows down your
script.

Test properties before you access them. Test methods before you call them.
Try to provide fallbacks for possible cases when they are not supported.

Put whitespace only where it makes the code easier to read (e.g. before and
after operators).

Don't use spacer elements, use CSS margins/paddings instead. Avoid format
attributes, use CSS instead.

Validate your markup: <http://validator.w3.org/>

Get a real name. Don't put manual newlines in Google Groups if you don't
know where the automatic ones happen -- that avoids this comb-like posting
of yours. As a general rule, avoid posting using Google Groups if you
can't handle it; there is plenty of good and free newsreader software out
there (e.g. Thunderbird and KNode).

<http://jibbering.com/faq/#posting>


HTH

PointedEars

 

[addy]

Two suggestions:

1) var foo = []; // better than new Array(); (see Crockford's book)

2) Putting the thumbnails into a single graphic and using an image map
could speed up your page load time. (see Souder's book)

Sasuke you re right Iam querying the dom while the element with
id=display is not even bieng rendered or the dom doesn't have it.
Moving the script block away from the <td> element. Thanks for your
help.

Martin, Thanks for your suggestions for image maps I will give that a
try again but this one is a huge gallery for a interior guy and and I
might need multiple image maps.

Cheers
Addy

 

[addy]

I am writing a gallery page where I am trying to load images in two
columns
of a table. I am able to get 1 row via getElementById but the second
one
returns a null which fails my other function which is responsible to
display
images in the table

[...]
<td width="30%" valign="top" id="galrow" >
<script type="text/javascript">
CreateResidentialGallery();
</script>
</td>
<td width="50%" id="display">
[...]
</td>
[...]
function CreateResidentialGallery()
{
  [...]
var oFullParent = document.getElementById("display"); <=== returns
null

You try to access the element object before it becomes part of the DOM tree.
Use <body onload="createResidentalGallery()"> instead.

Don't mix Array() and Array initializers (`[...]').  Make arrays of objects
instead of several arrays; that makes reuse and maintenance easier.

Avoid repeated property access (especially in for-loops); it slows down your
script.

Test properties before you access them.  Test methods before you call them.
Try to provide fallbacks for possible cases when they are not supported.

Put whitespace only where it makes the code easier to read (e.g. before and
after operators).

Don't use spacer elements, use CSS margins/paddings instead.  Avoid format
attributes, use CSS instead.

Validate your markup: <http://validator.w3.org/>

Get a real name.  Don't put manual newlines in Google Groups if you don't
know where the automatic ones happen -- that avoids this comb-like posting
of yours.  As a general rule, avoid posting using Google Groups if you
can't handle it; there is plenty of good and free newsreader software out
there (e.g. Thunderbird and KNode).

<http://jibbering.com/faq/#posting>

HTH

PointedEars- Hide quoted text -

- Show quoted text -

thanks for the pointers Tom, but you can't expect a kernel programmar
to do javascript and CSS too well.... I will remeber these.

cheers
addy