I am trying to understand how to call javascript function in div section in body of html. There are 7 images in an array and 7 buttons. For each button onclick, I want to display different pictures (for A, hangman0.gif, for B, hangman1.gif and so on....). But I don't see how it can be done given div sections. Please help!!!



Code:
<?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 = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
		
		
	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) {
	 	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"' + hangman + ' 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>