Jump to content

XML to HTML, How?


trinaryatom

Recommended Posts

JavaScript from w3schools.com

<html><body><script type="text/javascript">if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.open("GET","cd_catalog.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML; document.write("<table border='1'>");var x=xmlDoc.getElementsByTagName("CD");for (i=0;i<x.length;i++)  {   document.write("<tr><td>");  document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);  document.write("</td><td>");  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);  document.write("</td></tr>");  }document.write("</table>");</script></body></html>

The above code works fantastically in something I'm working on. I just wanted to look upon it, learn more, and expand ideas further.Question #1: How does the math work in this code? I would like to learn the symbols and how it does the math in order to manipulate it further to achieve my next question.I have looked in the Tutorials of JavaScript and cant seem to find anything about how "x." works. And understand very little about "(i=0;i<x.length;i++)"What i currently know, or at least i think it may be true:"i=0" -- i is 0"i<x.length" -- not sure about that one. I do know that, x is xmlDoc.getElementsByTagName("CD")."i++" -- also, a little confused how that comes into play here.Question #2: How can i get it to only read one at a time.For example: Have it start on the first set, then have a button with a little javascript with a function to have it go to the next set (one at a time) (i imagine the button would do something like i=i+1) Thus making sort of a "latest item box" and allowing for further browsing.Why: I would like to use this and it will help me learn more about how to do the math in JavaScript. Doing this through practice is the best way to learn, in my opinion.

Link to comment
Share on other sites

Thanks for the information. I don't know how i missed that.Anyway, upon reading that i have created the following code.This code only draws one at a time depending on what i equals and if i=0 then its the top, if i=1 its the next, and so on. This is perfect and is exactly what I'm going for.

<script type="text/javascript"><script type="text/javascript">if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.open("GET","cd_catalog.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML;document.write("<table border='1'>");var x=xmlDoc.getElementsByTagName("CD");i=0function drawTablefunction(){    document.write("<tr><td>");    document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);    document.write("</td><td>");    document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);    document.write("</td></tr>");}document.write("</table>");</script>

This is the HTML of the page. (shorthand, does not work in practical use)

<body>    <div id="addtI">        <input button AdditionI>    </div>    <div id="subtI">        <input button SubtractI>    </div>    <div>         drawTablefunction()    </div></body>

Now i was wondering if i can get buttons to mod the variable "i" to add or subtract and redraw the the one chosen.This code is an idea but doesn't work at all. I'm not sure how to go about this.

	function SubtractI()	{		if(i=x.length)		{			return;		}		else		{			i-1;			drawTablefunction()		}	}	function AdditionI()	{		if(i=0)		{			return;		}		else		{			i+1;			drawTablefunction()		}	}

Link to comment
Share on other sites

I could try to do something like this. But i don't know how to do the "var AddStuff = (blah,blah,blah,blah)"Javascripti=-1

function updateAddI(){i+1var AddStuff 	{		document.write("<tr><td>");		document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);		document.write("</td><td>");		document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);		document.write("</td></tr>");	}document.getElementById("feedbox").firstChild.nodeValue = AddStuff;}

HTML

<body><div id="addtI"><input button updateAddI()></div><div id="subtI"><input button updateSubI()></div><div id="feedbox"><script>updateAddI()</script></div></body>

Edit: Well i have exhausted everything i know (which is very little of javascript) not sure how to do this at all.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...