dynamic content in HTML document
I'm using javascript to create a link that when clicked will make a bunch of stuff change on the page without the page reloading. right now I'm using this:
document.getElementById("divname").innerHTML="THIS THING"
which changes everything within <div id="divname"> </div> to say THIS THING. This is working fine so far. The problem is I now need to change the content of certain div tags to contain more than 1 line, and this script doesn't work with this. If I'm changing/adding full tables and things, I can't put it all on one line. How can I do this? PLEASE help. You're awesome. Thanks.
# 1 Re: dynamic content in HTML document
Paul,
You're making a lot of work for yourself. Try a different approach:
Start by creating all the content you want inside "divname". Then hide everything except the initial view by using the SetView function, below.
Now you can have a set of javascript functions that will toggle the visibility of the elements for different scenarios. The code below "should" work for Internet Explorer. The SetView function drives everything.
If you don't have them, get your self two good reference books on JavaScript and CSS. I bought the O'Reilly books on these subjects and they're all I've ever needed. And they they have cool animals on the covers... :)
<SCRIPT Language="JavaScript">
function ShowObj(obj) {
if (obj) {
obj.style.display = ""; // shows the object
}
}
function HideObj(obj) {
if (obj) {
obj.style.display = "none"; // hides the object
}
}
function HideAll() {
HideObj(document.all['p1']);
HideObj(document.all['p2']);
HideObj(document.all['p3']);
HideObj(document.all['tbl1']);
HideObj(document.all['img1']);
}
function SetView(WhichView) {
HideAll(); // hide everything
// now show the items you want for the desired view
switch(WhichView) {
case 1:
ShowObj(document.all['p1']);
break;
case 2:
ShowObj(document.all['p2']);
break;
case 3:
ShowObj(document.all['p3']);
break;
case 4:
ShowObj(document.all['img1']);
ShowObj(document.all['tbl1']);
break;
}
}
</SCRIPT>
<BODY onLoad="SetView(1);">
<DIV id="divname">
<p id="p1">Initial content</p>
<p id="p2" >THIS THING</p>
<p id="p3" >A DIFFERENT THING</p>
<img id="img1" src="zzzz.gif" >
<TABLE id="tbl1">
...
</TABLE>
</DIV>
...
</BODY>
