baffling getElementById() has no properties error

[noddy]

In both IE7 and FF2(using firebug) I get the same error.

I have a page that displays work contacts' details within a
<DIV class = "contactBase" >.

The div has a header area
<div id="contactHeader" class="client" >
in which is displayed the contact's name.

Within this header area div I also want to display in smaller font
the name of the person who listed this contact.

I want to do this in <div id="contactLister" .

Thus we have:

<DIV class = "contactBase" >
<div id="contactHeader" class="client" >
<div id="contactLister" >

</div>
</div>
...
...
</DIV>
The contact is chosen from a <selectelement
(outside of these divs) which calls a
javascript function selectContact().

Within selectContact()
I successfully display the contact name with the line
document.getElementById('contactHeader').innerHTML = contactName;

However when I then try to display the lister with
document.getElementById('contactLister').innerHTML = listerName;

I get the error:
document.getElementById("contactLister") has no properties

I have placed the javascript at the bottom of the <bodybelow all the
html.
In addition I have tried placing the line
document.getElementById('contactLister').innerHTML = listerName;
in a separate function called at the end of selectContact()
but all to no avail.

I would be grateful if someone can tell me what I am doing wrong here.
TIA

N

[Lee]

noddy said:

>

In both IE7 and FF2(using firebug) I get the same error.

I have a page that displays work contacts' details within a
<DIV class = "contactBase" >.

The div has a header area
<div id="contactHeader" class="client" >
in which is displayed the contact's name.

Within this header area div I also want to display in smaller font
the name of the person who listed this contact.

I want to do this in <div id="contactLister" .

Thus we have:

<DIV class = "contactBase" >
<div id="contactHeader" class="client" >
<div id="contactLister" >

</div>
</div>
...
...
</DIV>
The contact is chosen from a <selectelement
(outside of these divs) which calls a
javascript function selectContact().

Within selectContact()
I successfully display the contact name with the line
document.getElementById('contactHeader').innerHTM L= contactName;

However when I then try to display the lister with
document.getElementById('contactLister').innerHTM L= listerName;

I get the error:
document.getElementById("contactLister") has no properties

In your original HTML, contactLister is contained within contactHeader.
When you replace the contents of contactHeader by changing its innerHTML
attribute, you destroy contactLister.
--

[noddy]

On 29 Mar 2007 17:53:51 -0700, Lee <RE**************@cox.netwrote:

>In your original HTML, contactLister is contained within contactHeader.
When you replace the contents of contactHeader by changing its innerHTML
attribute, you destroy contactLister.

Thanks - your help is much appreciated.

N