Can someone help write a HTML with Javascript (and probably image files or CSS)
ID: 3606199 • Letter: C
Question
Can someone help write a HTML with Javascript (and probably image files or CSS) that display the content of the attached XML file (computers.xml).The javascript should not try to access any files other than the supplied XML file.
Computers.xml
<?xml version="1.0" encoding="utf-8" ?>
<computer_list>
<computer>
<model_name>ATIV Book 4</model_name>
<type>Laptop</type>
<manufacturer>Samsung</manufacturer>
<operating_system>Windows 8</operating_system>
</computer>
<computer>
<model_name>C7 Chromebook</model_name>
<type>Laptop</type>
<manufacturer>Samsung</manufacturer>
<operating_system>Chrome OS</operating_system>
</computer>
<computer>
<model_name>Pavillion Slimline</model_name>
<type>Desktop</type>
<manufacturer>HP</manufacturer>
<operating_system>Windows 8</operating_system>
</computer>
<computer>
<model_name>Jackal 1U</model_name>
<type>Server</type>
<manufacturer>System76</manufacturer>
<operating_system>Ubuntu</operating_system>
</computer>
<computer><model_name>Power 710 Express</model_name>
<type>Server</type>
<manufacturer>IBM</manufacturer>
<operating_system>AIX</operating_system>
</computer>
</computer_list>
Explanation / Answer
Please find the HTML below:
<html>
<head>
<script type="text/javascript">
function myFunction() {
xmlhttp=new XMLHttpRequest();
window.alert("1");
xmlhttp.open("GET","Computers.xml");
window.alert("2");
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
window.alert(xmlDoc);
window.alert("3");
var table="<tr><th>Model Name</th><th>Type</th><th>Manufacturer</th><th>Operating System</th></tr>";
var x = xmlDoc.getElementsByTagName("computer");
window.alert(x);
for (i = 0; i <x.length; i++) {
table += "<tr><td>" + x[i].getElementsByTagName("model_name")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue + "</td><td>" +
x[i].getElementsByTagName("manufacturer")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("operating_system")[0].childNodes[0].nodeValue + "</td></tr>";
document.getElementById("demo").innerHTML = table;
}
}
</script>
</head>
<body>
<button type="button">Click to Read XML</button>
<table id="demo"></table>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.