Hi
I'm still a novice with web technologies and I have a few questions in line with the following code.
I'm trying to call a function getDetails() from another javascript function displayTable(). displayTable() gets invoked on clicking the button 'My CD Facts'.
Well, its not working for me. I guess its some thing daft but I'm not able to figure out. I tried to diagnose it with firebug and it says getDetails() is not defined.
Also, I have a basic css file for displaying the table in a particular style. That's not working either. Is it because I linked it in the body and I'm using it in the head?
<script type="text/javascript">
var xmlDoc;
function displayTable()
{
var artistName;
if (window.XMLHttpRequest)
{
xmlDoc=new window.XMLHttpRequest();
xmlDoc.open("GET","Artists.xml",false);
xmlDoc.send("");
xmlDoc=xmlDoc.responseXML;
}
else if (ActiveXObject("Microsoft.XMLDOM"))
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("Artists.xml");
}
document.write("<table class=\"artistTable\" border='1'>");
document.write("<th>Artist</th> <th>Title</th>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
artistName = x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
document.write("<tr><td><a href=\"javascript:getDetails(artistName );\">");
document.write(artistName);
document.write("</a></td></tr>");
}
document.write("</table>");
}
function getDetails(artistName )
{
alert(artistName);
}
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
<form>
<input type="button" value="My CD Facts" onclick="displayTable()"/>
</form>
</body>
</html>
cheers