Menu
I want to extract data from an xml file, then display it in expandable and collapsable accordion panels. Getting an object expected error at line 111.
[CODE]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Displaying XML data using Accordion</title>
<style type=”text/css”>
body {
font-size: 12pt;
font-family: Arial, Tahoma, Verdana;
}
.accordionItem h2 {
color: white;
font-size: 16pt;
background-color: #0000AA;
border: 1px solid #00EE00;
}
.accordionItem div {
padding: 1em 1em;
background-color: #FFFFFF;
color: #000000;
}
.accordionItem.hide h2 { color: white;
background-color: #CC66FF;
}
accordionItem.hide div { display:none; }
.showIt {
font-size: 14pt;
color: green;
font-family: Arial, Tahoma, Verdana;
border: thick solid;
padding: 10px;
}
b { font-size: 16pt;
color:#000000;
}
</style>
<script type=”text/javascript” language=”javascript”>
<!–The object detection code –>
var req = false;
// Is there support for native XHR object?: IE7+, Firefox, Safari, Opera
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
//create an XMLHttpRequest object
}
else if (window.ActiveXObject)
//check for Version 6
{
req = new ActiveXObject(‘MSXML2.XMLHTTP.6.0’);
//create an ActiveX XMLHTTP component
}
if (!req)
{
req = new ActiveXObject(‘MSXML2.XMLHTTP’);
//fallback to version 3
}
function runIt()
{
if (req)
{
//Request data to be retrieved from the server
req.onreadystatechange = function()
{
if (req.readyState == 4 && req.status == 200)
{
var response = req.responseXML;
readXML(response);
}
}
req.open(“GET”, “MusicianList.xml”, true);
req.send(null);
}
}
function readXML(response)
{
var myResponse = response.documentElement;
var myMusician = myResponse.getElementsByTagName(“musician”);
var place1 = document.getElementById(“musicians”);
var place2 = document.getElementById(“genres”);
var place3 = document.getElementById(“hitsongs”);
for (var i=0; i < myMusician.length; i++)
{
place1.innerHTML += myMusician[i].getElementsByTagName(“name”)[0].firstChild.nodeValue + “<br>”;
place2.innerHTML += myMusician[i].getElementsByTagName(“genre”)[0].firstChild.nodeValue + “<br>”;
place3.innerHTML += myMusician[i].getElementsByTagName(“hitsong”)[0].firstChild.nodeValue + “<br>”;
}
//Assign onclick events to the accordion headings
var h2 = getElementsByTagName(“h2”);
h2.onclick = toggleItem;
//Hide all accordion item bodies except the first
var accordionItem = getElementById(“accordionItem”);
for ( var i=1; i < accordionItem.length; i++ ) {
accordionItem[i].className = ‘accordionItem hide’;
}
}
function toggleItem() {
var itemClass = this.parentNode.className;
//Hide all items
var accordionItem = getElementById(“accordionItem”);
for ( var i=0; i < accordionItem.length; i++ ) {
accordionItem[i].className = ‘accordionItem hide’;
}
//Show this item if it was previously hidden
if ( itemClass == ‘accordionItem hidden’) {
this.parentNode.className = ‘accordionItem hide’;
}
}
//–>
</script>
</head>
<body onload=”runIt()”>
<h1>Click on a Panel to get more information on the musician</h1>
<div class=”accordionItem” id=”accordionItem”>
<h2>Musicians</h2>
<div id=”musicians”> </div>
</div>
<div class=”accordionItem” id=”accordionItem”>
<h2>Genres</h2>
<div id=”genres”> </div>
</div>
<div class=”accordionItem” id=”accordionItem”>
<h2>Their Hitsongs</h2>
<div id=”hitsongs”> </div>
</div>
</body>
</html>