Deminyx
04 Feb 2010, 10:24 PM
I use Google Chrome because of the Javascript debugger that comes included and I keep getting the following errors with my AJAX script
Uncaught TypeError: Cannot call method 'getElementsByTagName' of null option.html:23
Uncaught TypeError: Cannot call method 'getElementsByTagName' of null
option.html:40
option.html
<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
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
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.
Uncaught TypeError: Cannot call method 'getElementsByTagName' of null option.html:23
Uncaught TypeError: Cannot call method 'getElementsByTagName' of null
option.html:40
option.html
<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
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
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.