En esa primera linea y en la tercera lineas te sobra un punto entre la variable x y los [i] ademas la variable table la has llamado tabla por lo que saltaría otro error.
QuedaríanEstas líneas quedarían así:
tabla+=x[i]table+=x[i].getElementsByTagName("ARTIST")[0].textContent;
table+="</tr></td>";
tabla+=x[i]table+=x[i].getElementsByTagName("TITLE")[0].textContent;
Eso por el lado del código, por el lado de la maquina donde estas usando este codigo creo que si no instalas un servidor web no puedes hacer peticiones http asi a la ligera, es más, para que veas que si que funciona el codigo prueba en estala propia web: de codepenw3Schools y verasverás como ya no te da el error que salta ahora al corregir el fallo de código si no. Este código copialo y pegalo en su web sustituyendo al que te diceusan ellos y verás que no puede encontrar el fichero xmlfunciona bien.
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
<body>
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var table = "<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (var i = 0; i < x.length; i++) {
table += "<tr><td>";
table += x[i].getElementsByTagName("ARTIST")[0].textContent;
table += "</tr></td>";
table += x[i].getElementsByTagName("TITLE")[0].textContent;
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>