I made an html code to read data from an xml file. I ran the file and there are no errors but the button function does not work. Aside from the button, nothing else displays. (A table with the xml data should display when the button is pressed).
<html> <head> <title>Ajax</title> <script> function getOrderAjax(){ var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { processOrder(xhttp); } }; xhttp.open("GET", "A8.xml", true); xhttp.send(); } function processOrder(xhttp){ var xml = xhttp.responseXML; var productArray = parseXML(xml); display(productArray); } function parseXML(xml){ var productElements = xml.getElementsByTagName("onlineOrder"); var productArray = {}; productArray.month = marketElement.getAttribute("month"); productArray.products = []; for(var i=0; i< productElements.length; i++){ var product = {}; product.code = productElements[i].getElementsByTagName("code")[0].childNodes[0].nodeValue; product.unitPrice = Number(productElements[i].getElementsByTagName("unitPrice")[0].childNodes[0].nodeValue); product.lastMonth = Number(productElements[i].getElementsByTagName("lastMonth")[0].childNodes[0].nodeValue); product.thisMonth = Number(productElements[i].getElementsByTagName("thisMonth")[0].childNodes[0].nodeValue); product.difference = product.thisMonth - product.lastMonth; productArray.products.push(product); } return productArray; } function display(productArray){ var html = "<h1>Online order statistics for " + productArray.month + "</h1>"; html += "<table border='1'>"; html += "<tr><th align='center'>Code</th><th align='right'>Unit Price</th><th align='right'>Last Month</th><th align='right'>This Month</th><th align='right'>Change</th></tr>"; for(var i=0; i<itemArray.length; i++){ var price = itemArray[i].unitPrice * itemArray[i].quantity; html += "<tr>"; html += "<td align='center'>" + productArray.products[i].code + "</td>"; html += "<td align='right'>" + productArray.products[i].unitPrice + "</td>"; html += "<td align='right'>" + productArray.products[i].lastMonth + "</td>"; html += "<td align='right'>" + productArray.products[i].thisMonth + "</td>"; if(productArray[i].difference > 0){ html += "<td style='color:green' align='right'>" + productArray.products[i].difference + "</td>"; } else{ html += "<td style='color:red' align='right'>" + productArray.products[i].difference + "</td>"; } html += "</tr>"; } html += "</table>"; var orderDiv = document.getElementById("onlineOrder"); orderDiv.innerHTML = html; } </script> </head> <body> <button onClick="getOrderAjax()">Click here to view online order statistics</button> <br /><br /> <div id="onlineOrder" /> </body> </html>
No comments:
Post a Comment