Ok so i have the following html file:
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
<body>
<button type="button" onclick="loadDoc()">Get the names</button>
<br>
<br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET", "names.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table = "<tr><th>Names</th></tr>";
var x = xmlDoc.getElementsByTagName("Names");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
And the following xml file containing names:
<?xml version="1.0" encoding="UTF-8" ?>
<Names>
<Name>Alex</Name>
<Name>Anna</Name>
<Name>Eva</Name>
<Name>George</Name>
<Name>Jason</Name>
<Name>John</Name>
<Name>Lisa</Name>
<Name>Mary</Name>
<Name>Michael</Name>
<Name>Nick</Name>
<Name>Vicky</Name>
</Names>
And what i want is to somehow take the names from the xml file and store them inside an array and then print them.But for some reason only the first name is stored correctly("Alex").I dont understand what i have done wrong.Can somebody help me? I bet there is something wrong with the myFunction(xml) but i cant find/fix it
