HTML/JavaScript: Why won't the buttons work?

142

New member
I am writing a simple javascript hangman program, but the buttons won't activate. The browser debugger says 'letter' is undefined. (letter being a letter in the alphabet) I can't figure out what is undefined because I don't have any variables like that. The whole thing isn't quite finished yet, but the buttons should work with what I have so far.
Here is the html code:
<html>

<head>

<script type="text/javascript" src="hangman.js"></script>

</head>


<body bgcolor="#ccccff">

<script type="text/javascript">

answer = getAnswer().toUpperCase();
wordDisp = generateWordDisp(answer);
showPage();

</script>


</body>

</html>

Here is the javascript:
var answer;
var wordDisp = " ";
var numWrong = 0;
var buttonBoolean = new Array();

for(i = 0; i < 26; i++){
buttonBoolean = false;
}

function replaceChar(string, index, rep){
var string1, char, string2;
string1 = string.substring(0, index);
char = rep;
string2 = string.substring(index + 1);
return string1 + char + string2;
}

function isLetter(char){
var n = char.charCodeAt(0);
if( (n > 64 && n < 91) || (n > 96 && n < 123) )
return true;
else
return false;
}

function buttonGen(char){
var string = "<input type='button' style='height:40px;width:40px' value='" + char + "' onclick='update(" + char + ")'";
if(getDisable(char) == true)
string += "disabled='disabled' />";
else
string += " />";
return string;
}


function getDisable(char){
return buttonBoolean[char.charCodeAt(0) - 65];
}


function disable(char){
buttonBoolean[char.charCodeAt(0) - 65] = true;
}


function getAnswer(){
return prompt("Enter a word or phrase to use for this game of Hangman.", "");
}


function generateWordDisp(ans){
var string = "";
for(i = 0; i < ans.length; i++){
if(isLetter(ans.charAt(i)))
string += "_ ";
else{
if(ans.charAt(i) == " ")
string += ans.charAt(i) + "***";
else
string += ans.charAt(i) + " ";
}
}
return string;
}

function updateWordDisp(char){
for(i = 0; i < answer.length; i++){
if(char == answer.charAt(i))
wordDisp = replaceChar(wordDisp, wordDisp.charAt(i*2), char);
else
numWrong++;
disable(char);
}
}

function update(char){
updateWordDisp(char);
showPage();
}

function showPage(){

document.write("<title>Hangman Game</title>");

document.write("<style type='text/css'>");
document.write("td {text-align:center;}");
document.write("body {background-color:#ccccff;}");
document.write("</style>");

document.write("<h1 align='center'>Hangman Game</h1>");

document.write("<table align='center'>");
document.write("<tr>");
document.write("<td align='center'><img src='hangman" + numWrong + ".png' /></td>");
document.write("</tr><tr>");
document.write("<td><h2>" + wordDisp + "</h2></td>");
document.write("</tr><tr>");
document.write("<td><form name='letterButtons'>");
document.write("<table name='buttonTable'>");
document.write("<tr>");
document.write("<td>" + buttonGen("A") + "</td>");
document.write("<td>" + buttonGen("B") + "</td>");
document.write("<td>" + buttonGen("C") + "</td>");
document.write("<td>" + buttonGen("D") + "</td>");
document.write("<td>" + buttonGen("E") + "</td>");
document.write("<td>" + buttonGen("F") + "</td>");
document.write("<td>" + buttonGen("G") + "</td>");
document.write("<td>" + buttonGen("H") + "</td>");
document.write("<td>" + buttonGen("I") + "</td>");
document.write("<td>" + buttonGen("J") + "</td>");
document.write("<td>" + buttonGen("K") + "</td>");
document.write("<td>" + buttonGen("L") + "</td>");
document.write("&
Sorry for the cut off...
Here's the full code:
javascript - http://pastebin.com/0G1kn5gb
html - http://pastebin.com/EBNZA3cm

Also, I tried debugging in chrome, firefox, and IE. All of them returned </script> as the source of the error.
 
Back
Top