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>
Member Avatar for stbuchok

You haven't explained what your issue is.

As for debugging you can use the following:

In Firefox - Firebug
IN IE - Web Developer Toolbar
In Chrome - Developer Tools

This is fixed. I didn't know what was wrong with it. It just wouldn't work. I used the firebug to find the issues. Issues fixed below.

usedLetterBoxes(); //updated from Boxs to Boxes
document.getElementById('wordBoxes').innerHTML = tempText; //changed from Boxs to Boxes
alert ("You're Dead\nThe word was " + word); // update from Your to you're and made word lowercase

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.