Anyone familiar with hangman?

Discussion in 'JavaScript' started by ddolddolee82, Apr 7, 2006.

0
  1. #1
    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> 
  
     <!-- this div contains the hangman image to be updated --> 
     <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>
    Code (markup):
     
    ddolddolee82, Apr 7, 2006 IP