We will build a web-based program, ie a website with certain functionality, using JavaScript and XML data file above, "mensajes.xml" using XML DOM and HTML buttons.

The following website (messagesProg.htm) initially display the first message file "messages.xml" and will have two buttons to display the following message and the message above file.

This was seen in the browser:

xml programs

This is the web page code (messagesProg.htm):

<html> <head> <script type="text/javascript"> if (window.XMLHttpRequest) {     xmlhttp=new XMLHttpRequest(); } else {     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","messages.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("message"); i=0; function displayMessage() {     to=(x[i].getElementsByTagName("to")[0].childNodes[0].nodeValue);     from=(x[i].getElementsByTagName("from")[0].childNodes[0].nodeValue);     title=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);     text=(x[i].getElementsByTagName("text")[0].childNodes[0].nodeValue);     str="TO: " + to + "<br/> FROM: " + from + "<br/> TITLE: " + title + "<br/> TEXT: " + text;     document.getElementById("messagetag").innerHTML=str; } function next() {     if (i<x.length-1)     {          i++;          displayMessage();     } } function previous() {     if (i>0)     {          i--;          displayMessage();     } } </script> </head> <body onload="displayMessage()"> <div id='messagetag'></div><br /> <input type="button" onclick="previous()" value="<<" /> <input type="button" onclick="next()" value=">>" /> </body> </html>

JAVASCRIPT function "displayMessage" serves to show the label "messagetag" web page, a message data file "messages.xml".

JAVASCRIPT functions "next" and "previous" position update message to be displayed and call the function "displayMessage" to display it.

HTML function "onload" is used to perform some function to load the page in the browser. Can be used to initialize fields or in our case, to show the first message file.

HTML function "onclick" is used to execute functions when you click on any elemnto HTML, in our case, clicking on the ">>" button will display the message file.