Heya Trvl,
There were quite a few errors in both HTML and javascript. Note that
frames are no longer supported in XHTML, so you may as well get used to
coding without them. The object element in combination with simple
javascript allows similar functionality. Instead of a frameset document,
you should have this:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="applic ation/xhtml+xml" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Untitled </title>
<!--All the lines above are required for XHTML documents that use
intrinsic javascript events. Copy
them to a file you can use for a template; don't bother memorizing
it. The template should end with
</head><body></body></html>. These are all required elements.-->
<style type="text/css">
#left {
float:left;
}
#right {
float:right;
}
</style>
<!--The language attribute is deprecated in favor of MIME type-->
<script type="text/javascript">
var rightDoc = null;
function getUserName() {
var username = window.prompt(" Welcome to Exercise 8-2", "Enter
your name here");
var rightText = rightDoc.create TextNode(userna me + "Welcome to
Exercise 8-2");
rightDoc.body.a ppendChild(righ tText);
rightDoc.body.n ormalize();
/* In almost all cases, it is bad form to use document.write( )
unless one knows exactly what they are doing.
This function was moved here because it needs to run after the
right frame has finished loading. You'll
notice with javascript that if you call elements before they have
been loaded, they will always be null.
Learn more about the standard methods above at
http://www.w3.org/TR/DOM-Level-3-Core .
Note that as of this date, no browsers implement properties and
methods introduced in Level 3 Core. */
}
function setRightDoc() {
rightDoc = document.getEle mentById('right ').contentDocum ent;
}
</script>
</head>
<body onload="setRigh tDoc();getUserN ame()">
<object id="left" data="Left8-2.xhtml"
type="applicati on/xhtml+xml" height="600" width="50%"></object>
<object id="right" data="Right8-2.xhtml"
type="applicati on/xhtml+xml" height="600" width="50%"></object>
</body>
</html>
Note how all tag names and attributes are in lower-case, and all tags
are closed. Now you'll want to modify Left8-2.xhtml to be the following:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="applic ation/xhtml+xml" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Exerci se Left8-2 - LEFT FRAME PAGE with Document
Object </title>
<script type="text/javascript">
function checkField(fiel d) {
if (field.value == "") {
window.alert("P lease enter a Back ground Color");
field.focus ();
}
}
function changeRightTo(v alue) {
var rightDoc =
parent.document .getElementById ("right").conte ntDocument;
if(document.imp lementation.has Feature("CSS2", "2.0")) {
rightDoc.body.s tyle.setPropert y("background-color", value,
"important" );
}
}
</script>
<style type="text/css">
h2 {
text-align:center;
font-family:Arial, sans-serif;
color:green;
}
.my-form {
text-align:center;
font-family:Arial, sans-serif;
font-size:small;
color:green;
}
</style>
<!--All tags must be closed. Empty tags can be closed by adding a
slash before the closing '>' of the tag-->
</head>
<body>
<!-- Headings are structural, not aesthetic. If you don't like the
heading style, use stylesheets, but
never put heading numbers out of order simply for aesthetic reasons-->
<h1>This is the left document of Exercise 8-2</h1>
<!--The font element is no longer supported. Use stylesheets to
effect document aesthetics-->
<h2>Exercise 8-2 -JavaScript Buttons</h2>
<!--The center element is no longer supported. Use stylesheets for
aesthetic positioning.-->
<!--For most top-level elements, the functionality of name has been
replaced with id. Form components must still use
name to be successful.-->
<form id="FrmMyForm" action="Right8-2.html" class="my-form">
<!--It is good form to use label/control structure instead of having
controls in a sea of unrelated text.-->
<label for="MyField">E nter a Back Ground Color:</label>
<input type="text" name="MyField" id="MyField"
onblur="checkFi eld(this)" />
<!--The button element allows greater flexibility than the input
element of type button-->
<button type="button" name="Userbutto n"
onclick="change RightTo(documen t.getElementByI d('MyField').va lue)">
Change Back Ground Color
</button>
<button type="button" value="red" name="redbutton "
onclick="change RightTo(this.va lue)">
Change to Red!
</button>
<br />
<button type="button" value="yellow" name="yellowbut ton"
onclick="change RightTo(this.va lue)">
Change to Yellow!
</button>
<br />
<button type="button" name="buttonPri nt"
onclick="window .print()">Print </button>
<button type="button" name="rightbutt on"
onclick="window .location='Righ t8-2.html'">
Go to the Right Page
</button>
</form>
</body>
</html>
The Right8-2.xhtml file is just an empty XHTML document:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="applic ation/xhtml+xml" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Exerci se Right8-2 - RIGHT FRAME PAGE with Document
Object</title>
</head>
<body>
</body>
</html>
You should be able to work from here. Learn more about the current XHTML
standard at
http://www.w3.org/TR/xhtml11 .
