The letter selections seem to work now with a little troubleshooting, though it still doesn't register anything in the text boxes I've made. Instead of saying "Undefined" now, it just duplicates whatever button I press by replacing another one with that letter. I'm sure it's something easy I'm not seeing, but I can't figure out where I went wrong here!
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Derek Dinsmore's Hangman Game - GIT215</title>
<script src="words.js">
</script>
<script>
wordNo = Math.round(Math.random() * (Array1.length-1))
imageNo = 2
word = new String(Array1[wordNo])
tries = 0
usedLetters = new Array()
letterPosition = word.length + 2
guess = ""
function checkGuess(letter) {
startPoint = eval(-1)
position = 0
found = false
document.forms[0].elements[letterPosition].value = letter
letterPosition++
while (position != -1) {
position = word.indexOf (letter, startPoint + 1)
if (position!=-1) {
found = true;
document.forms[0].elements[position].value = letter;
startPoint = position;
}
}
tries++
if (!found) {
document.images[0].src = "Images/hangman" + imageNo + ".png"
imageNo++
if (imageNo >= 12)
lose()
}
guess = ""
for (i=0; i< word.length; i++) {
guess = guess + document.forms[0].elements[i].value
}
if(guess.length == word.length) {
win()
}
}
function lose() {
alert ("You're Dead! The word was " + word)
window.document.location = "hangman_2.html"
}
function win() {
word = word.toUpperCase()
guess = guess.toUpperCase()
if (word == guess) {
alert("Good Job! You've saved your life... this time.")
window.document.location = "hangman_2.html"
}
}
</script>
<style type="text/css">
body {background-color: #1087d9;}
body {color: #000}
</style>
</head>
<body>
<hr />
<hr />
<hr />
<hr />
<form>
<table align="left" background="Images/background.png" width="600" height="600" border="0" cellspacing="30" cellpadding="0">
<tr>
<td align="center" rowspan="2" height="350" width="255">
<img src="Images/hangman1.png" />
</td>
<td height="160" width="255" align="center">
<input type="button" value="A" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="B" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="C" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="D" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="E" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="F" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="G" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="H" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="I" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="J" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="K" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="L" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="M" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="N" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="O" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="P" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="Q" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="R" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="S" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="T" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="U" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="V" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="W" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="X" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="Y" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="Z" name="letterGuess" onClick="checkGuess(this.value)">
</td>
</tr>
<tr>
<td height="160" width="255" align="center">
<h3>Letters Guessed:</h3>
<p>
<script>
for (i=0; i<28; i++) {
document.write("<input type=text size=1>")
}
</script>
</p>
</td>
</tr>
<tr>
<td colspan="2" height="160" width="540" align="center">
<script>
for (i=0; i<word.length; i++) {
document.write("<input type=text size=5 maxlength=1 value=''>")
}
</script>
</td>
</tr>
</table>
</form>
<table align="center" width="600" border="0" cellspacing="30" cellpadding="0">
<tr>
<td>
<p><b>Hello and welcome to Derek's Javascript Hangman!</b></p>
<p>This app was designed using tutorials and examples from various websites which are listed in the javascript code section.
It was created soley in Adobe Dreamweaver, using Adobe Photoshop for the graphics. Now let's get onto it, here's how to play:</p>
</td>
<tr>
<td>
<h3 align="center">Instructions:</h3>
<p>In the bottom window is displayed the number of letters in your word and your progress.</p>
<p>Using the letters shown in the top right box, click the one one which you'd like to guess.</p>
<p>As you click a letter, it will be added to the "Letters Guessed" window.</p>
<p>You will not be penalized for selecting the same letter twice. </p>
<p>You have ten (10) tries before you are "hung."</p>
<ul>
<li>The category is musical instruments, only one word will be used.</li>
</ul>
<p>Good Luck!</p></td>
</tr>
</table>
<hr />
<hr />
<hr />
<hr />
</body>
</html>
Here's a link to the original code and the new code that I'm trying to get to work:
http://www.public.asu.edu/~ddinsmor/hangman.html
http://www.public.asu.edu/~ddinsmor/hangman_2.html