I use Google Chrome because of the Javascript debugger that comes included and I keep getting the following errors with my AJAX script

Code:
Uncaught TypeError: Cannot call method 'getElementsByTagName' of null option.html:23
Uncaught TypeError: Cannot call method 'getElementsByTagName' of null
option.html:40
option.html
Code:
<html>
	<head>
		<title>Options  </title>
		<script language="javascript">
			var XMLHttpRequestObject = false;
			
			if (window.XMLHttpRequest){
				XMLHttpRequestObject = new XMLHttpRequest();
				XMLHttpRequestObject.overrideMimeType("text/xml");
			} else if(window.ActiveXObject){
				XMLHttpRequestObject = new ActiveXObject("Micrsoft.XMLHTTP");
			}
			
			function getoptions1()
			{
				if(XMLHttpRequestObject){
					XMLHttpRequestObject.open("GET", "option1.php");
					
					XMLHttpRequestObject.onreadystatechange = function()
					{
						if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){
							var xmlDocument = XMLHttpRequestObject.responseXML;
							options = xmlDocument.getElementsByTagName('option');
							listoption();
						}
					}
					
					XMLHttpRequestObject.send(null);
				}
			}
			function getoptions2()
			{
				if(XMLHttpRequestObject){
					XMLHttpRequestObject.open("GET", "option2.php");
					
					XMLHttpRequestObject.onreadystatechange = function()
					{
						if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){
							var xmlDocument = XMLHttpRequestObject.responseXML;
							options = xmlDocument.getElementsByTagName('option');
							listoption();
						}
					}
					XMLHttpRequestObject.send(null);
				}
			}
			function listoption()
			{
				var loopIndex;
				var selectControl = document.getElementById('optionList');
			
				for (loopIndex = 0; loopIndex < options.length; loopIndex++)
				{
					selectControl.options[loopIndex] = new Option(options[loopIndex].firstChild.data);
				}
			}
			function setoption()
			{
				document.getElementById('targetDiv').style.color = options.getElementById('optionList').selectedIndex.firstChild.data;
			}
		</script>
	</head>
	<body>
		<h1>Using Ajax and XML</h1>
		<form>
			<select size="1" id="optionList" onchange="setoption()">
				<option> Select an Option </option>
			</select>
			<input type="button" value="Use color scheme 1" onClick="getoptions1()">
			<input type="button" value="Use color scheme 2" onClick="getoptions2()">
		</form>
		
		<div id="targetDiv" width=100 height=100> Set the color of this text! </div>
	</body>
</html>
option1.php
PHP Code:
<?php
header
("Content-type: text/xml");
$options = array('red''green''blue');
echo 
'<?xml version="1.0">';
echo 
'<options>';
foreach (
$options as $value)
{
    echo 
'<option>';
    echo 
$value;
    echo 
'</option>';
}
echo 
'</options>';
?>
option2.php
PHP Code:
<?php
header
("Content-type: text/xml");
$options = array('black''white''orange');
echo 
'<?xml version="1.0">';
echo 
'<options>';
foreach (
$options as $value)
{
    echo 
'<option>';
    echo 
$value;
    echo 
'</option>';
}
echo 
'</options>';
?>
What is supposed to happen is I press either button then it calls either getoptions1() or getoptions2() which then lists the options using listoption()
Then the user selects a color and setoption() gets called. I'm having a problem with either getoption function or the listoption function. Can anyone help me.