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
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
Share Improve this question edited Jul 1, 2009 at 19:56 Arnkrishn asked Jun 25, 2009 at 16:52 ArnkrishnArnkrishn 30.5k40 gold badges116 silver badges128 bronze badges3 Answers
Reset to default 2getDetails() is not a Javascript buit-in function. It is a user defined function. The people that wrote the book Head First Ajax defined their version of the getDetails() on page 24.
document.write("<tr><td><a href=\"javascript:getDetails(" + artistName + ");\">");
A couple of minor mistakes.
- document.write clears off the rest of the page, so the script you have slotted in has gone. You could try instead of using document.write, using document.getElementById("id").InnerHtml to a div / span. (im not a js expert - so you may want to google that.), instead, for the document.writing.
what rony said, but with a couple of single inverted mas.
document.write("< tr>< td>< a href=\"javascript:getDetails('" + artist + "');\">");