Here is my code:
<HTML>
<HEAD>
<TITLE>Menu</TITLE>
<script type="text/javascript">
function loadXMLDoc(url)
{
var xmlhttp;
var text,x,xx,i;
if(window.XMLHttpRequest)
{//code for IE7+,Firefox,Chrome,Opera,Safari
xmlhttp = new XMLHttpRequest();
}
else
{//code for IE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
txt="<table border='1'><tr><th>Name</th><th>Description</th><th>Price</th><th>Calories</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsbyTagName("food");
for(i=o;i<x.length;i++)
{
txt=txt + "<tr>";
txt = txt + displayTableCell("name",x[i]);
txt = txt + displayTableCell("description",x[i]);
txt=txt+displayTableCell("price",x[i]);
txt=txt+displayTableCell("calories",x[i]);
txt=text+ "</tr>";
}
txt=txt+ "</table>";
document.getElementById('txtMenuInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function displayTableCell(tagName,e)
{var xx,t;
xx=e.getElementsByTagName(tagName);
{
try
{
t="<td>"+xx[0].firstChild.nodeValue + "</td>";
}
catch(er)
{
t="<td>"</td>";
}
}
return t;
}
</script>
</HEAD>
<BODY>
<div id="textMenuInfo"></div>
<button onclick="loadXMLDoc('foodmenu.xml')" type="button">Get Menu</button>
</BODY>
</HTML>
When the "Get Menu" button is clicked, it's supposed to show the table. But instead, nothing happens when I click it.