I have an assignment and need to fix this code. I have gotten to the point of not having any errors on my page for html, but need help with the javascript portion. I also want to understand the changes and why. I only need to make changes to the index file. I uploaded the entire package and included the index code below.
What are the best programs to debug?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- added doc type-->
<HTML>
<HEAD>
<TITLE>Hang Man</TITLE>
<script type="text/javascript" src="words.js"></script>
<script type="text/javascript">
//added the javascript type
//added script type
//Author: My name Added my name here and added doc type
var wordNo = Math.round(Math.random() * (Array1.length-1));
var imageNo = 2;
var word = new String(Array1[wordNo]);
var numberOftries = 0;
var usedLetters = new Array();
var usedLetterPosition = word.length + 2;
var guess = "";
function setupEvents() {
usedLetterBoxes();//changed from Boxs to Boxes
loadWordBoxes();
}
function usedLetterBoxes() {
var tempText = "";
for (i=0; i<21; i++) {
tempText += "<input type=text size=1 id='box" + i + "'>";
}
document.getElementById('usedLetters').innerHTML = tempText;
}
function loadWordBoxes () {
var tempText = "<nobr>";
for (i=0; i<word.length; i++) {
tempText += "<input type=text size=1 maxlength=1 value='' id='letter" + i + "'>";
}
tempText +="<nobr>"; //removed the end tag in nobr
document.getElementById('wordBoxs').innerHTML = tempText;
}
function checkGuess() {
startPoint = eval(-1);
position = 0;
found = false;
letter=document.getElementById('letterGuess').value;
document.forms[0].elements[usedLetterPosition].value = letter;
usedLetterPosition++;
} //added the end bracket for this fuction
while (position != -1) {
position = word.indexOf (letter, startPoint + 1);
whichLetterBox = "letter" + position;
if (position!=-1) {
found = true;
document.getElementById(whichLetterBox).value = letter;
startPoint = position;
}
}
numberOftries++;
if (!found) {
document.images[0].src = "0" + imageNo + "_Man.gif";
imageNo++;
if (imageNo >= 8)
deadMan();
guess = ""
for (i=0; i< word.length; i++) {
guess = guess + document.forms[0].elements[i].value;
}
if(guess.length == word.length) {
guessWord();
}
document.forms[0].letterGuess.focus();
document.forms[0].letterGuess.select();
}
function deadMan() {
word = word.toUpperCase();
alert ("Your Dead\nThe word was " + word);//changed from Word to word
window.document.location = "index.html"; //updated to my new file name
}
function guessWord() {
word = word.toUpperCase();
guess = guess.toUpperCase();
if (word == guess) {
alert("Your right!\nand you did it in " + numberOftries + " guesses");
window.document.location = "index.html";//updated to my filename
}
}
window.onload = setupEvents;
</script>
</HEAD>
<BODY BGCOLOR="#FFaaFF">
<center>
<h2>Hang Man</h2>
<form action=""><!--added action=""-->
<table width="530" border="1" bgcolor="white" cellpadding="5"><!--added quotes around 530, 1, white, 4-->
<tr>
<td rowspan="4"><!--added quotes around 4--><IMG SRC="01_Man.gif" WIDTH="286" HEIGHT="299" alt="man"> <!--added alt tag-->
</td>
<td><b>Instructions:</b> Try to figure out the word.
You get 7 guesses and then he's dead. (Sorry about the gratuitous violence)
<p align="center" id="wordBoxes"></p></td>
</tr>
<tr>
<td colspan="2" align="center" style="nowrap">Type a letter<!--changed nowrap to a style instead of <nowrap> tag-->
<input type="text" size="2" id="letterGuess"><!--added quotes around text and 2-->
and
<input type="button" value="Click" onClick="checkGuess()"> <!--put quotes around button-->
</td>
</tr>
<tr>
<td colspan="2"><h2> Used Letters </h2><!--changed from H2 to h2-->
<p id="usedLetters"></p></td>
</tr>
</table>
</form>
</center>
</BODY>
</HTML>