Seite wird nur in Firefox richtig angezeigt

[newBee]

Guten Tag werte htmler.
Ich habe folgendes Problem: Anscheinend wird das Javascript nur in Firefox richtig ausgeführt, dort werden alle Inhalte so angezeigt wie ich es möchte. Unter Chrome, IE, Opera ist dies nicht der Fall, hier bleibt die betroffene Box leer... Chrome warf eine cross-origin-request (ich hab nur lokal getestet), aber auch mit file-access blieb alles beim alten...
Ich würd mich sehr freuen wenn Ihr mir auf die Sprünge helfen könntet...
Archivübersicht:

<script>
loadXMLDoc();
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      myFunction(xmlhttp);
    }
  };
  xmlhttp.open("GET", "catalog.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th></th><th>Titel</th><th>Interpret</th><th>Album</th><th>Länge</th><th>Jahr</th><th>Label</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {
    table += '<tr><td><a href="'+x[i].getElementsByTagName("LINK")[0].childNodes[0].nodeValue+'" target="_blank"> <img src="playButton.png" alt="play_button" height="20" width="20"> </a>' +
"</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("DURATION")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue +
"</td></tr>";}
document.getElementById("demo").innerHTML = table;}
</script>

Videoarchiv:

<script>
loadXMLDoc();
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      myFunction(xmlhttp);
    }
  };
  xmlhttp.open("GET", "catalog.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {
    table += '<h2>'+x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue+" - " + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +'</h2><a href="'+
x[i].getElementsByTagName("LINK")[0].childNodes[0].nodeValue+'" target="_blank"><img src="'+
x[i].getElementsByTagName("ALBUMCOVER")[0].childNodes[0].nodeValue +'" alt="albumcover" width="100" height="100" style="float:left;"/></a><div id="video">'
+"Album: "+ x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue +"<br>"+
"Länge: " + x[i].getElementsByTagName("DURATION")[0].childNodes[0].nodeValue +"<br>"+
"Erscheinungsjahr: " + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +"<br>"+
"Label: " + x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue+"</div><br>";}
document.getElementById("demo").innerHTML = table;}
</script>

 

[Tronjer]

Fällt dir nicht selber auf, wie gruselig der Code aussieht? Außerdem verwendet man kein XML mehr.

Schreibe das nochmal neu, als einfachen GET-Request auf ein JSON-File und lass das Ergebnis per console.log() ausgeben. Ganz ohne HTML. Das Network-Tab zeigt übrigens auch, was gesendet wird, bzw. ankommt, und wenn du es dir einfach machen willst, nimm jQuery Ajax().