Anyone familiar with hangman?

ddolddolee82

Apr 7th 2006, 8:17 am

I have javascript codes that display an image corresponding to each different button on a new page. But what I really want to do is change the image on the same page.
I need to call a function in <div id="hanger"> section of body of html codes, just don't know how to do that.
Please help.
Thank you.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Hangman</title>
<style type="text/css">
body {
font-family: sans-serif;
margin: 0;
}

#header {
font-size: 2.5em;
font-weight: bold;
background-color: #3882C7;
text-align: center;
padding: .25em;
color: #ffffff;
border-bottom: 1px solid #000000;
}

#hanger {
text-align: center;
margin-top: 1em;
}

#word {
margin-top: 1em;
font-size: 3em;
text-align: center;
font-family: monospace;
}

#letters {
text-align: center;
margin-top: 1em;
}

#letters input {
margin: .2em;
width: 2em;
}

#notification {
margin-top: 1em;
text-align: center;
}

#options {
margin-top: 2em;
text-align: center;
}
</style>
<script type="text/javascript" src="http://userpages.umbc.edu/~dhood2/courses/cmsc433/spring2006/Miscellaneous/JavaScript/p1/dictionary.js"></script>
<script type="text/javascript">

// YOUR CODE HERE
var gallows = [
"http://userpages.umbc.edu/~dhood2/courses/cmsc433/spring2006/Miscellaneous/JavaScript/p1/hangman0.gif",
"http://userpages.umbc.edu/~dhood2/courses/cmsc433/spring2006/Miscellaneous/JavaScript/p1/hangman1.gif",
"http://userpages.umbc.edu/~dhood2/courses/cmsc433/spring2006/Miscellaneous/JavaScript/p1/hangman2.gif",
"http://userpages.umbc.edu/~dhood2/courses/cmsc433/spring2006/Miscellaneous/JavaScript/p1/hangman3.gif",
"http://userpages.umbc.edu/~dhood2/courses/cmsc433/spring2006/Miscellaneous/JavaScript/p1/hangman4.gif",
"http://userpages.umbc.edu/~dhood2/courses/cmsc433/spring2006/Miscellaneous/JavaScript/p1/hangman5.gif",
"http://userpages.umbc.edu/~dhood2/courses/cmsc433/spring2006/Miscellaneous/JavaScript/p1/hangman6.gif",
]

var letters = ['0', '1', '2', '3', '4', '5', '6'];

function writeLetters() {
for(var i = 0; i < letters.length; i++ ) {
document.write('<input type ="button" onclick="checkLetter(getValue(this))" value="' + letters[i] + '" />');
}
}

function getValue(button)
{
button.disabled = true;
// document.write('<p>button value: ' + b.value + '</p>');

return(button.value);
}

function checkLetter(letter) {

document.write('<img src="' + gallows[letter] + '" id="hangman" />');
/*
if (letter == 'B') {
document.hanger.hangman.value = gallows[1];
}
*/

}

</script>
</head>
<body>
<div id="header">Hangman</div>


<div id="hanger">

<script type="text/javascript">

// document.write('<img src="' + gallows[1] + '" id="hangman" />');

</script>

<img src="http://userpages.umbc.edu/~dhood2/courses/cmsc433/spring2006/Miscellaneous/JavaScript/p1/hangman0.gif" id="hangman" />

</div>

<div id="letters">
<script type="text/javascript">

writeLetters();

</script>
</div>

</body>
</html>