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.

Do you see any errors reported in your dev tools (F12) console log?

It says:

Uncaught SyntaxError: Invalid regular expression: missing /

document.getElementById('txtMenuInfo').innerHTML=txt; and <div id="textMenuInfo"></div>
are not the same element, change one or the other

t="<td>"</td>";
should not contain the middle "
t="<td></td>";

var text,x,xx,i; should be var txt,x,xx,i;
and
txt=text+ "</tr>"; should be txt=txt+ "</tr>";

for(i=o;i<x.length;i++) should be a 0 so for(i=0;i<x.length;i++)

x=xmlhttp.responseXML.documentElement.getElementsbyTagName("food");
should have a capital B in getElementsByTagName
x=xmlhttp.responseXML.documentElement.getElementsByTagName("food");

xmlhttp.open("GET",url,true); and xmlhttp.send(); both need to be placed outside of the function xmlhttp.onreadystatechange=function()

so

xmlhttp.onreadystatechange=function(){
    //bla
}
//xmlhttp.open("GET",url,true);
//xmlhttp.send();

If it's still not working then make sure you're running it from a server (localhost).

Thanks for your help, it's working now!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.