Forum Moderators: open
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- ITM 261 In-Class Exercise: Display Squares and Cubes in a Table using While Loop -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Display Squares & Cubes in Table</title>
<script type = "text/javascript">
<!--
window.alert("good");
var npcpos = [ "npctrack", "track", "track", "track", "track", "track" ];
var userpos = [ "usertrack", "track", "track", "track", "track", "track" ];
document.write ( "<table border='0'><tr>" );
for ( var n = 0; n < npcpos.length; ++n )
{
document.write ( "<td width='122px' height='55px'><img src = \"" + npcpos[ n ] + ".jpg\" /></td>" );
document.write ( "<td width='122px' height='55px'><img src="\finish.jpg" /></td></tr><tr>" );
for (var u = 0; u < userpos.length; ++u )
{
document.write ( "<td width='122px' height='55px'><img src = \"" + userpos[ u ] + ".jpg\" /></td>" );
}
document.write ( "<td width='122px' height='55px'><img src="\finish.jpg" /></td></tr>" );
document.write ( "<tr><td align='center'>start</td><td></td><td></td><td></td><td></td><td></td><td align='center'>finish</td></tr></table>" );
function move(something)
{
var userspeed=Math.floor(Math.random());
var cpuspeed=Math.floor(Math.random());
if (cpuspeed > userspeed)
{
for ( var t = 1; n < npcpos.length; t++ )
{
document.writeln( "<td width='122px' height='55px'><img src = \"" + npcpos[ t ] + ".jpg\" /></td></td>" );
}
document.writeln("<td width='122px' height='55px'><img src='npcfinish.jpg' /></tr><tr>" );
for (var g = 1; g < userpos.length; g++ )
{
document.writeln( "<td width='122px' height='55px'><img src = \"" + userpos[ g ] + ".jpg\" /></td></td>" );
}
document.writeln( "<td width='122px' height='55px'><img src='userfinish.jpg' /></td>" );
}
else
{
for ( var t = 1; n < npcpos.length; t++ )
{
document.writeln( "<td width='122px' height='55px'><img src = \"" + npcpos[ t ] + ".jpg\" /></td></td>" );
}
document.writeln( "<td width='122px' height='55px'><img src='npcfinish.jpg' /></tr><tr>" );
for (var g = 1; g < userpos.length; g++ )
{
document.writeln( "<td width='122px' height='55px'><img src = \"" + userpos[ g ] + ".jpg\" /></td></td>" );
}
document.writeln( "<td width='122px' height='55px'><img src='userfinish.jpg' /></td>" );
}
}
-->
</script>
</head>
<body>
<center>
<FORM>
<INPUT TYPE="button" VALUE="STEP ON IT!" onClick="move(1);">
</FORM>
</center>
</body>
</html>
First, I would question whether you really want to be using an XHTML DOCTYPE. You should probably really be using an HTML 4.01 DOCTYPE instead. You're using deprecated element <center>, and uppercase tags <FORM> and <INPUT> (you should change those to lowercase). Here's the 4.01 transitional DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
On to your script...
1. Don't put HTML comments inside <script> tags.
2. Try calling alert, not window.alert.
3. You're calling document.write inside the <head> of your document. In general, I would advise against using document.write at all and instead using DOM methods to append nodes to your document. But this is obviously a homework assignment and it would seem that best practices are still lacking from today's HTML courses. If you move this script so it resides in your <body> instead of <head>, it will probably work.
4. You should be escaping the "/" character like you do with the quotes. So this:
".jpg\" /></td>"
becomes this:
".jpg\" \/><\/td>"
5. As daveVK pointed out, src="\finish.jpg" should be src=\"finish.jpg\"
6.
Next, you need escape the ampersand in your <title>. So & becomes &
I'm going to stop there for now. Why don't you correct these items and give it another try and let us know if threre's any change.