'document is not an object' when trying to change <DIV> content

Catherine Lynn Smith

I am creating a webpage with dhtml <DIV> layers and I want a link on
one layer to modify the content on another but I seem to keep running
into errors.

Basically I create a layer in the middle of the screen that initially
comes up with a gif image of a house:


<DIV id="house" style="position:absolute; left:140px; top:137px;
width:510px; height:325px; z-index:2"><img src="images/house.gif"
width="510" height="325"></DIV>


In another portion of the browser I have a navigation bar built in
another <DIV> layer that includes a number of links:


<DIV id="rtnav" style="position:absolute; left:600px; top:400px;
width:200px; height:100px; z-index:13">
<SPAN id="members" class="rightnav"><a href="javascript:void();"
onClick="gotoMembers();">Member Login</a></SPAN>
</DIV>


In the <HEAD> portion, I have a <SCRIPT> section that includes the
function gotoMembers() {} that I am hoping can either use
document.write('...'); or perhaps a load("members.htm",800);
{preferred} to change the existing content (the gif of a house) to a
small login form:

function gotoMembers() { // pop up member dialog in blueCenter
// Example is being tested in Internet Explorer. I have also used
document.all["house"] and done
// similar testing in Netscape using document.layers["house"] without
success.

// - try using 'load' method to load an external page
// document.getElementById("house").load("members.htm ",800);

// - using document.write('...');
document.getElementById("house").document.open();
document.getElementById("house").document.write('t his is a test, this
is only a test - please work!!!');
document.getElementById("house").document.close();
}

Whenever I use the 'document.method();' it says "{node}.document is
not an object" where {node} is the method I used to retrieve the DIV
layer ID. I have confirmed that I can use all three constructs to
change the style.visibility='hidden' so it's not something else
somewhere and I have tried this in both Netscape 7.1 and Internet
Explorer Version: 6.0.2800.1106

What am I missing here?

As stated, my preference would be to load a seperate .htm file
including mark-up into the target frame "house" but none of the
document properties appear to be defined for that layer. Any help
would be appreciated.

Kathy

Janwillem Borleffs

"Catherine Lynn Smith" <kl*****@hotmail.com> schreef in bericht
news:5f**************************@posting.google.c om...

function gotoMembers() { // pop up member dialog in blueCenter
// Example is being tested in Internet Explorer. I have also used
document.all["house"] and done
// similar testing in Netscape using document.layers["house"] without
success.

// - try using 'load' method to load an external page
// document.getElementById("house").load("members.htm ",800);

// - using document.write('...');

document.write can only be used with <layers /> in Netscape 4 when the page
is already loaded. document.getElementById(...).load(...) won't work either.

You could use an iframe instead voor Netscape 7/Mozilla and IE if you want
to include content URL based, but if you want to write to the div, you
should use its innerHTML property:

IE 4:
document.all['divID'].innerHTML = stringHTML;

IE 5+/Mozilla/Netscape 7+/Opera 7:
document.getElementById('divID').innerHTML = stringHTML;
JW

son3mendo

In have understood well (I hope!), you'd like to change the content
of a tag div (an img) clicking another div, look if this is suitable for
you, using DOM:
<html>
<head><title>Try</title>
<script>
function change() {
var div = document.getElementById("firstDiv");
var old = div.childNodes[0];
var xxx = document.createElement("form");
var son = document.createElement("input");
div.replaceChild(xxx, old);
div.childNodes[0].appendChild(son).setAttribute("type", "text");
}
</script>
</head>
<body>
<div id="firstDiv"><img id="whatever" src="fotografie.jpg" /></div>
<div id="another"onClick="change();">clickme!</div>
</body>

hope it could help you!!!

ciao

g. paolini

Catherine Lynn Smith

OK - I will try that - also, is there a way to do this by retreiving
the new content from another stand-alone html file? (e.g.
"members.htm")

KL

son3mendo <son3mendo@_NS_excite.it> wrote in message news:<pan.2003.09.11.21.13.33.419877@_NS_excite.it >...

In have understood well (I hope!), you'd like to change the content
of a tag div (an img) clicking another div, look if this is suitable for
you, using DOM:
<html>
<head><title>Try</title>
<script>
function change() {
var div = document.getElementById("firstDiv");
var old = div.childNodes[0];
var xxx = document.createElement("form");
var son = document.createElement("input");
div.replaceChild(xxx, old);
div.childNodes[0].appendChild(son).setAttribute("type", "text");
}
</script>
</head>
<body>
<div id="firstDiv"><img id="whatever" src="fotografie.jpg" /></div>
<div id="another"onClick="change();">clickme!</div>
</body>

hope it could help you!!!

ciao

g. paolini

'document is not an object' when trying to change <DIV> content

This discussion thread is closed

Similar topics